除了利用CSS实现文字旋转外，还可以使用图片精灵（Image Sprite）和少量用来准确定位的CSS。但这个量可能并不少。这就像摇胡椒罐一样，弄不好就会突然在食物上撒上一大坨胡椒，让你喷嚏连天。
幸运的是，如今很多主流浏览器都支持旋转HTML元素的功能。这样会更好吗？我可以让他在IE（甚至是IE5.5版本）上使用。你想问什么？好，我们先来看一下HTML。
- <div class="example-date">
- <span class="day">31span>
- <span class="month">Julyspan>
- <span class="year">2009span>
- div>
这段代码没有太多额外的累赘，很是干净漂亮。我谨慎地选择了我所使用的日期顺序，避免了使用逗号。否则的话，还得使用一个额外的span来从最终的设计中移除逗号。
神奇的CSS
对于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添加了声明。
在提到Internet Explorer中的效果时，我不得不说，使用过滤器可以实现异常强大的功能（但很多还没有开发出来）。其中一个称作BasicImage的过滤器——这个名字可能有点误导人——能够旋转任何具有布局的元素。
BasicImage过滤器的rotation属性能够接受以下四个值之一——0、1、2或3，对应着将元素旋转0、90、180或270度。
BasicImage过滤器还具有其他一些可供设置的属性，如mirroring、masking、greyscale等等。另外，你还可以利用Matrix过滤器，但这些坐标对我来说没有任何意义。
CSS实现文字旋转实际效果
CSS实现文字旋转的实际效果如何请使用Safari、Firefox或Internet Explorer查看原文（英文）页面，你会看到如下图所示的效果。也许***的区别就在于文本呈现的不一致。Internet Explorer对于任何应用了过滤器的文本都会丢弃ClearType特性。你还会看到，对于Safari和Firefox，日期和年份之间的间距是不同的。文本呈现上的区别导致很难建立“像素***（Pixel Perfect）”的布局。
希望本文可以给你带来一些灵感。虽然在IE中需要耍一些花招，不过我们还是感受到了布局的乐趣。
【编辑推荐】
