tranform 矩阵--matrix()方法

CSS3 transform的matrix()方法写法如下：

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

　　

　　反应在这里就是如下转换公式：

　　

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

　　

 

缩放：

用公式就很明白了，假设比例是s，则有matrix(s, 0, 0, s, 0, 0);，于是，套用公式，就有：
x' = ax+cy+e = s*x+0*y+0 = s*x;
y' = bx+dy+f = 0*x+s*y+0 = s*y;

也就是matrix(sx, 0, 0, sy, 0, 0);，等同于scale(sx, sy);

 

旋转：

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

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

3D变换中的矩阵：

3D变换虽然只比2D多了一个D，但是复杂程度不只多了一个。从二维到三维，是从4到9；而在矩阵里头是从3*3变成4*4, 9到16了。

其实，本质上很多东西都与2D一致的，只是复杂度不一样而已。这里就举一个简单的3D缩放变换的例子。

对于3D缩放效果，其矩阵如下：

　　

代码表示就是：

　　transform: matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)

 

作者：喜悦的小鹏哥