css3 transform中的matrix的理解

在现代浏览器，使用css3的transform，我们可以很容易对元素进行移动、缩放、旋转、拉伸操作，分别对应translate,scale,rotate,skew，其实还有一个更加复杂的属性，就是matrix矩阵，使用matrix可以实现上述几个属性的所有效果。

语法

transform: matrix(a,b,c,d,e,f);

看起来好多参数，实际上，这6个参数，对应矩阵就是：

注意书写的方向是竖着的。

其计算方法就是大学时候线性代数的知识了，转换方式如下：

与该矩阵 做运算可以得到

那么ax+cy+e就是代表变换后的水平坐标，bx+dy+f表示变换后的垂直坐标。

偏移（translate）

以如下为例：

transform: matrix(1, 0, 0, 1, 30, 30); /* a=1, b=0, c=0, d=1, e=30, f=30 */

假定矩阵元素偏移中心点为(0,0)，即x=0,y=0。

于是，变换后的x坐标就是ax+cy+e = 1*0+0*0+30 =30, y坐标就是bx+dy+f = 0*0+1*0+30 =30。

实际上transform: matrix(1, 0, 0, 1, 30, 30);就等同于transform: translate(30px, 30px);. 注意：translate, rotate等方法都是需要单位的，而matrix方法e, f参数的单位可以省略。

所以可以看出，元素的偏移只和matrix的最后两个参数有关,e代表的是水平偏移量，f代表的是垂直偏移量。

缩放（scale）

可能已经发现了，matrix参数中包含这个两个1，猜想可能这两个参数会与缩放有关。的确，a代表的x轴，d代表的是y轴。那么matrix(sx,0,0,sy,0,0)等同于scale(sx,xy)。

旋转（rotate）

这个比较复杂，需要借助三角函数来计算角度。

方法以及参数使用如下（假设角度为θ）：

matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

感觉这个用起来挺麻烦的，没有rotate直接写角度值来的直接。

拉伸（skew）

拉伸也需要借助于三角函数tanθ，并且只与b,c两个参数有关。使用方法如下：

matrix(1,tan(θy),tan(θx),1,0,0)

对应于skew(θx + "deg"，θy+ "deg")这种写法。

其中，θx表示x轴倾斜的角度，θy表示y轴，两者并无关联。

注：本文内容借鉴于 张鑫旭 大神的博客内容。