在現代瀏覽器中使用CSS3的transform樣式即可輕松搞定，但是對於國內IE瀏覽器（特別是7,8）還占有較大份額的情況下，兼容性還是必須要考慮的，所以也特意記錄下IE旋轉濾鏡的使用。
在IE下的旋轉濾鏡有兩種：
第一種：
CSS樣式
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation:1)
其中rotation屬性只有四個值：0,1,2,3 分別表示的旋轉度數是：0度，90度，180度，270度。查看參考文檔，請點擊這里，但是想要旋轉其他任意度數上面的方法就不適合了，這就需要下面的方法。
第二種
CSS樣式
filter:progid:DXImageTransform.Microsoft.Matrix(enabled=bEnabled ,SizingMethod=sMethod ,FilterType=sType ,Dx=fDx ,Dy=fDy ,M11=fM11 ,M12=fM12 ,M21=fM21 ,M22=fM22)
- enabled:定義濾鏡是否被禁止使用，取值范圍為布爾值，當取值為true的時候濾鏡可用；取值為false時，禁止使用濾鏡。
- SizingMethod:定義元素使用圖片時是否改變屬性。當取值為clip to original時，元素不改變尺寸；當取值為auto expand時，元素改變尺寸。
- FilterType:定義元素旋轉的方法。當取值為bilinear時，使用平滑、靜態的顯示效果；nearest neighhbor一般用於動態濾鏡中。
- Dx:定義水平方向上的向量增加量。使用浮點數定義增量的大小，默認值為1.0。
- Dy:定義垂直方向上的向量增加量。使用浮點數定義增量的大小，默認值為1.0。
- M11：定義元素右側邊線水平方向上的顯示位置。使用浮點數定義增量的大小，默認值為1.0。當取值大於1.0時，右邊線向右移動，同時拉伸元素的寬度；當取值小於1.0時，右邊線向左移動，同時減小元素的寬度。
- M12:定義元素底側邊線水平方向上的顯示位置。使用浮點數定義增量的大小，默認值為0時。當取值大於0時，底部連線向右移動，同時拉伸元素的寬度；當取值小於0時，底部邊線向左移動，同時拉伸元素的寬度。
- M21：定義元素右側邊線豎直方向上的顯示位置。使用浮點數定義增量的大小，默認值為0。當取值大於0時，底部邊線向下移動，同時拉伸元素的高度；當取值小於0時，底部邊線向上移動，同時拉伸元素的高度。
- M22：定義元素底側邊線豎直方向上的顯示位置。使用浮點數定義增量的大小，默認值為1.0。當取值大於1.0時，底部邊線向下移，同時拉伸元素的高度；當取值小於1.0時，右邊線向上移動，同時減小元素的高度。
以上是此濾鏡全部的參數，但是平時用的最多的參數只有5個，所以可以簡化為：
CSS樣式
filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod=sMethod ,M11=fM11 ,M12=fM12 ,M21=fM21 ,M22=fM22)
SizingMethod一般選擇“auto expand”，它和“clip to original”值的區別如下圖（圖中旋轉角度都為45度）：
下面來說下如何計算旋轉值，也就是如何計算M11,M12,M21,M22的值。
其實也很簡單，用計算器算即可，如果你要做旋轉動畫，那么需要JS去計算，M11=cos(角度值),M12=-sin(角度值),M21=sin(角度值),M22=cos(角度值)。例如：你想要旋轉10度，那么sin(10)約=0.174,cos(10)約=0.985,所以四個值相應為：M11=0.985,M12=-0.174,M21=0.174,M22=0.985
在這里也想提下，IE Matrix濾鏡還可以實現放大和縮小的效果，類似於zoom樣式，只要將M11,M12,M21,M22的值乘以相應的倍數即可。