[翻译] 使用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中需要耍一些花招，不过我们还是感受到了布局的乐趣。

（完）