Matrix 矩阵

CSS3中的矩阵指的是一个方法，书写为matrix()和matrix3d()，前者是元素2D平面的移动变换(transform)，后者则是3D变换。2D变换矩阵为3*3, 如上面矩阵示意图；3D变换则是4*4的矩阵。

 

transform 里面的：斜拉(skew)，缩放(scale)，旋转(rotate)以及位移(translate)。本质上就是通过matrix实现的快捷方法(注意：translate, rotate等方法都是需要单位的，而matrix方法e, f参数的单位可以省略。)

 

transform-origin: 50px 70px; （向左移50，向上移70）代表的是transform的中心点（也就是下面的x, y）

 

开始：

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

（a表示缩放x轴，b和c影响拉伸，d表示缩放y轴，e水平偏移距离，f垂直偏移距离）

实际上，这6参数，对应的矩阵就是：

 

矩阵计算：

ax+cy+e，是由3*3矩阵每一行的第1个值与后面1*3的第1个值相乘，第2个值与第2个相乘，第3个与第3个，然后相加。ax+cy+e为变换后的水平坐标，bx+dy+f表示变换后的垂直位置。

 

举例：

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

假设元素中心点为： x = 0;  y = 0;

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

也就是元素从(0, 0)  移动到右下方 (30, 30)(等同于transform: translate(30px, 30px);)

 

 

 

 

 

http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/