css3中的transform讓我們操作變形變得很簡單，諸如，translate–移動，scale–縮放，rotate–旋轉，skew–斜切。這幾個屬性很方便，也很簡單，但是其中matrix我們就不常使用了吧。-webkit-transform: matrix(1, 0, 0, 1, 100, 100)看到這樣一句css，你也許很討厭怎么一堆的數字，你也許斜視matrix–css也能搞出這貨？這篇文章我們一起探討一下transform中的matrix。
一、初識matrix
2d matrix提供6個參數啊a,b,c,d,d,e,f其基本寫法如下：
回顧一下高中數學，或者線性代數，即可知道matrix計算方法。x和y是元素初始的坐標，x’ 和y’則是通過矩陣變換后得到新的坐標。通過中間的那個3×3的變換矩陣，對原先的坐標施加變換，就能得到新的坐標了。依據矩陣變換規則即可得到： x’=ax+cy+e
y’=bx+dy+f。
transform中translate，scale，rotate，skew背后實現原理也對應着matrix變化，下邊依次解釋：
變換矩陣公式可參考變換矩陣wiki（http://zh.wikipedia.org/zh-cn/%E5%8F%98%E6%8D%A2%E7%9F%A9%E9%98%B5）
二、移動translate
移動matrix參數為：matrix(1,0,0,1,Δx,Δy)（Δx,Δy分別對應x和y軸的增量）。由此公式可知：
-webkit-transform: translate(100px,100px);即對應着-webkit-transform: matrix(1, 0, 0, 1, 100, 100);
推算出： x’ = 1*x+0 * y+100 = x+100 ， y’ = 0 * x+1 * y+100 = y+100。
三、縮放scale
縮放matrix參數為：matrix(kx*x,0,0,ky*y,0,0)（kx，和ky分別對應x和y軸縮放比率）。由此公式可知：
-webkit-transform: scale(1.5,1.5);及對應着 -webkit-transform: matrix(1.5, 0, 0, 1.5, 0, 0);
推算出： x’ = 1.5*x+0 * y+0 = 1.5 * x ， y’ = 0 * x+1.5 * y+0 =1.5 * y。
四、旋轉rotate
旋轉matrix參數為：matrix(cosθ,sinθ,-sinθ,cosθ,0,0)，由此可知
-webkit-transform: rotate(45deg);即對應着 -webkit-transform: matrix(0.53, 0.85, -0.85, 0.53, 0, 0);
（sin(45′)=0.85，cos(45′)=0.53）
推算： x’ = x*cos(45′)-y*sin(45′)+0 = x*cos(45′)-y*sin(45′)，y’ = x*sin(45′)+y*cos(45′)+0 = x*sin(45′)+y*cos(45′)
五、斜切skew
斜切matrix參數為matrix(1,tan(θy),tan(θx),1,0,0)，由此可知
-webkit-transform: skew(45deg);即對應着 -webkit-transform: matrix(1,0,1,1,0,0);
（tan(45′)=1）
推算出 x’ = x+y*tan( 45′ )+0 = x+y*tan( 45′ )， y’ = x*tan( 45′ )+y+0 = x*tan( 45′)+y
六、鏡相對稱
鏡像對稱沒有相應的簡化操作。終於有一個只能用matrix實現得了。。。
假設對稱軸為y=kx直線，那么以這條直線對稱的圖形matrix為
matrix(2*ux^2-1,2*ux*uy,2*ux*uy,2*uy^2-1,0,0)
求解過程為：
假設(ux,uy)為直線方向的單位向量。也就是說，如果直線方程是y=kx，那么ux=1/sqrt(1+k^2)，uy=k/sqrt(1+k^2)，
推算出： x’ = (2*ux^2-1)*x+2*ux*uy*y
y’ = 2*ux*uy*x+(2*uy^2-1)*y。 
七、3d變換矩陣
3d矩陣即為透視投影，推算方法與2d矩陣相類似 
3d變換矩陣代碼示例，matrix變為matrix3d
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) 
八、ie matrix濾鏡
ie matrix濾鏡僅能實現旋轉和拉伸，具體寫法為：
filter: progid:DXImageTransform.Microsoft.Matrix( enabled= bEnabled , SizingMethod= sMethod , FilterType= sType , Dx= fDx , Dy= fDy , M11= fM11 , M12= fM12 , M21= fM21 , M22= fM22 )
其中M11, M12, M21, M22分別對應2d矩陣中的a,c,b,d。
1’ 所以旋轉實現即為：
M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation)
對應此段代碼ie7下截圖為：
filter: progid:DXImageTransform.Microsoft.Matrix( enabled= bEnabled , SizingMethod=’auto expand’, FilterType= sType , M11= 0.53 , M12= -0.85 , M21= 0.85 , M22= 0.53 ) 
2‘ ie7縮放實現對應截圖：
filter: progid:DXImageTransform.Microsoft.Matrix( enabled= bEnabled , SizingMethod=’auto expand’, FilterType= sType , M11=1.5 , M12= 0 , M21= 0 , M22=1.5 ) 
其他變換可以發揮想想啦。。。。
參考文章：
http://zh.wikipedia.org/zh-cn/%E5%8F%98%E6%8D%A2%E7%9F%A9%E9%98%B5
http://www.w3.org/TR/css3-2d-transforms/
http://dev.opera.com/articles/view/understanding-the-css-transforms-matrix/
http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx