CSS3 2D和3D矩阵的原理_CSS3 2D and 3D matrix

2d的变形:

-webkit-transform: matrix3d(1, 0, 0, 1);

这里的`(1, 0, 0, 1)是两个向量a(1,0) b(0,1),向量a是x轴方向上的,向量b是y轴方向上的.向量值的变化使得图形在方向和大小上有所改变.
`

3d的变形:

-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);

这里的16个值描述了3个向量：

x轴方向 a(x1,x2,x3) y轴方向 b(y1,y2,y3) z轴方向 c(z1,z2,z3).

T行则重新定义了 x,y,z轴方向的对象(object)位置，即其在3d空间中的坐标.

W列则决定各个轴的透视效果(perspective-projection),它是我们沿着相关轴的视角(viewpoint).具体与齐次坐标(Homogeneous Coordinates)有关.

宅鱼