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参数,对应的矩阵就是:
![](https://images2015.cnblogs.com/blog/886955/201601/886955-20160128153844567-1067142208.gif)
![](https://images2015.cnblogs.com/blog/886955/201601/886955-20160128153844567-1067142208.gif)
矩阵计算:
![](https://images2015.cnblogs.com/blog/886955/201601/886955-20160128153852754-364272809.gif)
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);)