ie旋轉濾鏡Matrix

旋轉一個元素算是一個比較常見的需求了吧，在支持CSS3的瀏覽器中能夠使用transform很容易地實現，這裏有介紹：http://www.css88.com/archives/2168，這裏有演示http://www.css88.com/tool/css3Preview/Transform.html，就再也不介紹了。

在IE下旋轉一個元素，則只能靠濾鏡了。

若是隻是以90度爲單位旋轉的話，簡單地使用這個濾鏡就好：

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=i)

其中i取0，1，2，3，分別表明旋轉90度、180度、270度、360度。

而若是要實現任意角度旋轉，則要使用Matrix（矩陣）濾鏡。

網上介紹的方法都是這樣：

filter:progid:DXImageTransform.Microsoft.Matrix(M11=m11,M12=m12,M21=m21,M22=m22,sizingMethod="auto expand");

設旋轉角爲x，用弧度表示。那麼m11=cos(x),m12=-sin(x),m21=sin(x),m22=cos(x)

正弦sin的誘導公式（對邊比斜邊）

sin(2kπ+α)=sin α 
sin(π/2-α)=cos α
sin(π/2+α)=cos α 
sin(-α)=-sin α
sin(π+α)=-sin α 
sin(π-α)=sin α

餘弦cos的誘導公式（鄰邊比斜邊）

cos(2kπ+α)=cos α 
cos(π/2-α)=sin α 
cos(π/2+α)=-sin α
cos(-α)=cos α
cos(π+α)=-cos α 
cos(π-α)=-cos α

實測這個方法有效，可是它會繞元素原來輪廓的左邊和上邊轉動，仍是畫個圖示意一下：

如圖所示，圖形會貼着上邊和左邊旋轉。

那若是咱們要繞中間點旋轉的話要怎麼作呢？這就說來話長了，得講到幾何的向量方法。

座標系中，每一個點有一個座標，好比點p(3,4)，橫座標爲3，縱座標爲4。

接下來，向量：簡單理解爲有方向的線段。

將點和原點鏈接起來，方向從原點指向點，即構成一個向量op。

經過這樣的方式，咱們就將向量與點一一映射起來了，研究點的時候就能夠用向量來研究啦。

 

接下來，研究旋轉的實質，P點繞原點O（順時針）旋轉角度α，即向量OP旋轉α，新的點P‘座標變爲(3cosα-4sinα,4sinα+3cosα).

爲何會是這個值，

 被旋轉了  並但願知道旋轉後的座標 :

或

請參閱http://zh.wikipedia.org/wiki/%E6%97%8B%E8%BD%AC（數學裏面以逆時針爲正方向，因此公式在符號上略有不一樣）

上面新座標中，在原座標上進行的計算的數cosα,-sinα,sinα,cosα恰好就是上上面IE的matrix中的參數m11,m12,m21,m22！

事實上，上面的計算通常會寫成矩陣的方式來進行，見維基百科的表示方法。

因此，matrix濾鏡的實質是對圖形進行座標的矩陣運算。

上面說的是繞原點O旋轉，若是繞的是非原點呢？狀況比較複雜，詳見http://hi.baidu.com/windsion/blog/item/b4a41951699aa0c9b645ae4f.html。

大體分爲三步：

1. 總體位移，即把中心點和向量作相應位移，使旋轉點變爲原點
2. 繞原點旋轉，和上面說的同樣
3. 總體位移，再將中心點移回原來的地方去

這個時候，計算的矩陣就變得複雜了（上面文章的最下方）。

而事實上，這個矩陣是能夠化簡的，詳見這裏http://stackoverflow.com/questions/5051451/javascript-ie-rotation-transform-maths

最終，咱們獲得除了上面的m11,m12,m21,m22以外的另外兩個數，這兩個數在IE的matrix濾鏡中表示爲Dx,Dy。

將這六個參數寫入matrix濾鏡，便可繞中心點旋轉了。

完整的寫法：

progid:DXImageTransform.Microsoft.Matrix(Dx=dx,Dy=dy,M11=m11,M12=m12,M21=m21,M22=m22);

其中

dx=-width/2*cosdeg+height/2*sindeg+width/2, dy=-width/2*sindeg-height/2*cosdeg+height/2 m11,m12,m21,m22與前面說的同樣。

哦哦，對了，微軟官方說了http://msdn.microsoft.com/en-us/library/ms532872(v=vs.85).aspx，若是sizingMethod=」auto expand」，那麼Dx、Dy是無效的哦。因此去掉就好啦。

最後的最後，sizingMethod是什麼意思呢，若是不設它的話，旋轉對象的容器大小會是固定的，因此可能有遮擋的狀況，本身要調整好大小，而若是它被設爲auto expand，就是自動擴展的意思，即旋轉時外面的容器大小會自動調整，以便不遮擋正在旋轉的元素。