通過(guò)CSS實(shí)現(xiàn)文字旋轉(zhuǎn)
除了利用CSS實(shí)現(xiàn)文字旋轉(zhuǎn)外，還可以使用圖片精靈（Image Sprite）和少量用來(lái)準(zhǔn)確定位的CSS。但這個(gè)量可能并不少。這就像搖胡椒罐一樣，弄不好就會(huì)突然在食物上撒上一大坨胡椒，讓你噴嚏連天。
幸運(yùn)的是，如今很多主流瀏覽器都支持旋轉(zhuǎn)HTML元素的功能。這樣會(huì)更好嗎？我可以讓他在IE（甚至是IE5.5版本）上使用。你想問什么？好，我們先來(lái)看一下HTML。
- <div class="example-date">
- <span class="day">31span>
- <span class="month">Julyspan>
- <span class="year">2009span>
- div>
這段代碼沒有太多額外的累贅，很是干凈漂亮。我謹(jǐn)慎地選擇了我所使用的日期順序，避免了使用逗號(hào)。否則的話，還得使用一個(gè)額外的span來(lái)從最終的設(shè)計(jì)中移除逗號(hào)。
神奇的CSS
對(duì)于Webkit和Firefox（從3.5版本起），你可以利用提案中的transform屬性來(lái)處理旋轉(zhuǎn)。目前，每種瀏覽器都需要為該屬性增加前綴。
-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.
為了執(zhí)行變換，元素必須設(shè)置為display:block。在這里，只為需要旋轉(zhuǎn)的span添加了聲明。
在提到Internet Explorer中的效果時(shí)，我不得不說(shuō)，使用過(guò)濾器可以實(shí)現(xiàn)異常強(qiáng)大的功能（但很多還沒有開發(fā)出來(lái)）。其中一個(gè)稱作BasicImage的過(guò)濾器——這個(gè)名字可能有點(diǎn)誤導(dǎo)人——能夠旋轉(zhuǎn)任何具有布局的元素。
BasicImage過(guò)濾器的rotation屬性能夠接受以下四個(gè)值之一——0、1、2或3，對(duì)應(yīng)著將元素旋轉(zhuǎn)0、90、180或270度。
BasicImage過(guò)濾器還具有其他一些可供設(shè)置的屬性，如mirroring、masking、greyscale等等。另外，你還可以利用Matrix過(guò)濾器，但這些坐標(biāo)對(duì)我來(lái)說(shuō)沒有任何意義。
CSS實(shí)現(xiàn)文字旋轉(zhuǎn)實(shí)際效果
CSS實(shí)現(xiàn)文字旋轉(zhuǎn)的實(shí)際效果如何請(qǐng)使用Safari、Firefox或Internet Explorer查看原文（英文）頁(yè)面，你會(huì)看到如下圖所示的效果。也許***的區(qū)別就在于文本呈現(xiàn)的不一致。Internet Explorer對(duì)于任何應(yīng)用了過(guò)濾器的文本都會(huì)丟棄ClearType特性。你還會(huì)看到，對(duì)于Safari和Firefox，日期和年份之間的間距是不同的。文本呈現(xiàn)上的區(qū)別導(dǎo)致很難建立“像素***（Pixel Perfect）”的布局。
希望本文可以給你帶來(lái)一些靈感。雖然在IE中需要耍一些花招，不過(guò)我們還是感受到了布局的樂趣。
【編輯推薦】
