CSS3 Transform Matrix

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