CSS技巧 : 旋轉網頁中的圖片或文字 – transform: rotate

作者 : Fred Wang@F.W.知識瑣紀，日期 : 2013/10/22

一些設計的最大問題就是必須使用圖片的方法展現文字的旋轉等效果，文字無法選取而且增加了網頁中的圖片，減低網頁顯示效能。若使用CSS的transform屬性來控制文字，元素內的文字就可選取，而且不需載入圖片，網頁的效能較好。

CSS的transform屬性達成了一些與SVG相同的展現功能。可用於inline元素和block元素。只需一行CSS程式碼就可以做到網頁元素如文字與圖片的旋轉、縮放和移動。

下面是利用CSS transform: rotate旋轉文字的案例。

範例 :



在上面範例的CSS程式中，transform使用-webkit-和-moz-前綴然後將#content元素反時鐘方向旋轉90度。(更改旋轉值就可以讓它旋轉多少度，要逆時針旋轉就加入一個負號“ - ”)

IE支援CSS標準較不完整，而且通常有自己獨特的寫法，常需要為IE做特別的設計與測試。IE6~8提供了圖形旋轉filter，它可以有4個旋轉值：0, 1,2,和3。雖然這個filter只支持4個值，不像Webkit和Gecko一樣可以精密地設定旋轉值，至少在一定程度上保持一致。注意在IE8中要寫成“-ms-filter”。但是到了IE10的"-ms-transform"就比較接近其他的標準了，支援較為精密的旋轉值設定。