[翻譯] 使用CSS進行文字旋轉

[翻譯] 使用CSS進行文字旋轉

原文地址：http://snook.ca/archives/html_and_css/css-text-rotation

譯文地址：http://www.cnblogs.com/AndersLiu/archive/2009/07/29/css-text-rotation.html

翻譯：Anders Liu

摘要：在讀了別人的文章之後我深受啟發，在此給出另外一個樣本。這就是——文字旋轉。

Once again, after reading somebody else's article, I felt inspired to put together an alternative example. In this case: Text Rotation.

在讀了別人的文章之後我深受啟發，在此給出另外一個樣本。這就是——文字旋轉。

Within the article I linked to, the example uses an image sprite and a sprinkle of CSS to get things positioned right. Well, maybe not so much a sprinkle. It's like the top fell off the pepper shaker and you've suddenly got a large pile of pepper on your food. It makes me want to sneeze.

在前面的超連結給出的文章中，其樣本使用的是圖片精靈（Image Sprite）和少量用來準確定位的CSS。但這個量可能並不少。這就像搖胡椒罐一樣，弄不好就會突然在食物上撒上一大坨胡椒，讓你噴嚏連天。

Thankfully, many of the popular browsers of today support the ability to rotate HTML elements. Even better? We can make it work in Internet Explorer (back to version 5.5 even). How you might ask? Okay, let's look at the HTML.

幸運的是，如今很多主流瀏覽器都支援旋轉HTML元素的功能。這樣會更好嗎？我可以讓他在IE（甚至是IE5.5版本）上使用。你想問什嗎？好，我們先來看一下HTML。

<div class="example-date">  <span class="day">31</span>   <span class="month">July</span>   <span class="year">2009</span></div>

Nice and clean without too many extras. I conscientiously chose the date order I did to avoid having to use a comma. Otherwise, an extra span would be required to remove the comma from our final design.

這段代碼沒有太多額外的累贅，很是乾淨漂亮。我謹慎地選擇了我所使用的日期順序，避免了使用逗號。否則的話，還得使用一個額外的span來從最終的設計中移除逗號。

The Magical CSS
神奇的CSS

For Webkit and Firefox (as of 3.5), you can take advantage of the proposed transform property to handle the rotation. Each browser requires its property prefix for now.

對於Webkit和Firefox（從3.5版本起），你可以利用提案中的transform屬性來處理旋轉。目前，每種瀏覽器都需要為該屬性增加首碼。

-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); 

In order to perform a transformation, the element has to be set to display:block. In this case, just add the declaration to the span that you want to rotate.

為了執行變換，元素必須設定為display:block。在這裡，只為需要旋轉的span添加了聲明。

When it comes to effects in Internet Explorer, there is a surprising amount of power (and untapped at that, I'd say) in using filters. Although misleading, there is a filter called BasicImage that offers up the ability to rotate any element that has layout.

在提到Internet Explorer中的效果時，我不得不說，使用過濾器可以實現異常強大的功能（但很多還沒有開發出來）。其中一個稱作BasicImage的過濾器——這個名字可能有點誤導人——能夠旋轉任何具有布局的元素。

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

The rotation property of the BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degress respectively.

BasicImage過濾器的rotation屬效能夠接受以下四個值之一——0、1、2或3，對應著將元素旋轉0、90、180或270度。

The BasicImage filter has other properties that can be set such as mirroring, masking, greyscale and others. Alternatively, you can take advantage of the Matrix filter but the coordinates still don't make any sense to me.

BasicImage過濾器還具有其他一些可供設定的屬性，如mirroring、masking、greyscale等等。另外，你還可以利用Matrix過濾器，但這些座標組我來說沒有任何意義。

In action
實際效果

What does this look like in action? Take a look at this page in Safari, Firefox or Internet Explorer and you should see something that looks like the following image. Probably the biggest downfall is the lack of consistency in text rendering. Internet Explorer will drop ClearType on any text that has a filter applied to it. You can also see the spacing between the day and the year is different between Safari and Firefox. The differences in text rendering make it more difficult to create "pixel perfect" layout.

實際效果如何請使用Safari、Firefox或Internet Explorer查看原文（英文）頁面，你會看到如所示的效果。也許最大的區別就在於文本呈現的不一致。Internet Explorer對於任何應用了過濾器的文本都會丟棄ClearType特性。你還會看到，對於Safari和Firefox，日期和年份之間的間距是不同的。文本呈現上的區別導致很難建立“像素完美（Pixel Perfect）”的布局。

Here's hoping the article has offered up a little inspiration and shown that even IE has a few tricks up its sleeve, allowing us to pull off some layout fun.

希望本文可以給你帶來一些靈感。雖然在IE中需要耍一些花招，不過我們還是感受到了布局的樂趣。

（完）