CSS3 transform旋轉屬性

目前越來越多的瀏覽器安全色CSS3標準了，CSS3裡有一個使對象旋轉的屬性transform rotate，號稱相容CSS3的瀏覽器對它的支援也不算好，好在Firefox、Webkit和Opera這些瀏覽器都已經提供了官方的hack去支援這個屬性。唯獨在IE瀏覽器裡對這個transform屬性無法通過一般的CSS寫法去實現。

在W3C官方的標準裡，通過transform屬性使對象旋轉的寫法如下：

 transform: rotate(40deg); /* 其中40是旋轉的角度 */

可是由於目前幾乎所有的瀏覽器對這個屬性的渲染效率都很低，所以我們可以用下面的hack去提高渲染效率：

 -o-transform: rotate(40deg); /* Opera瀏覽器 */

-webkit-transform: rotate(40deg); /* Webkit核心瀏覽器 */

-moz-transform: rotate(40deg); /* Firefox瀏覽器 */

由於目前所有版本的IE都不相容CSS3，所以我們只能通過IE的CSS濾鏡來實現，寫法如下：

filter: progid  XImageTransform.Microsoft.Matrix(sizingMethod='auto expand',

M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398,

M22=0.7660444431189779)";

這個一個相當複雜的濾鏡，詳細的參數大家可以看看這個網頁。

關於這篇文章的示範，大家可以看這個DEMO： IE瀏覽器css-Transforms示範。

PS：大家可以下載本文提供的DEMO，然後把代碼裡 transform 屬性放在三個瀏覽器的hack 面，重新整理一下頁面看看會有什麼現象。我在Firefox裡看到的是中間那個旋轉的DIV會跳動一下。

Tip：transform 一個相當複雜的屬性，目前可以實現旋轉和動畫效果，我認為這個屬性在CSS3標準完全確定下來以後會變得更加強大。

著作權聲明：轉載時請以超連結形式標明文章原始出處和作者資訊及本聲明

文章引用地址：http://www.iefans.net/css3-transform-ie/ 作者：iefans