matrixtransform中有这么几个属性方法skew(35deg)/斜拉/scale(1, 0.5)/缩放/rotate(45deg)/旋转/translate(30px, 15px)/位移/其实找到旧像素位置(x,y)与新像素位置(x’,y’)的关系就可以用matrix表示。transform的matrix()方法写法如下:transform: matrix(a,b,c,d,e,f);新旧像素位置转换如下:$ \begin{bmatrix} a & c &e \ b & d &f\0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \ y \1 \end{bmatrix}=\begin{bmatrix} ax+cy+e \ bx+dy+f \0+0+1 \end{bmatrix} \begin{matrix} ←x’ \ ←y’ \←1 \end{matrix}$假设transform: matrix(A, 0, 0, B, a, b); 则$ \begin{bmatrix} A & 0 &a \ 0 & B &b\0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \ y \1 \end{bmatrix}=\begin{bmatrix} Ax+a \By+b \1 \end{bmatrix} \begin{matrix} ←x’ \ ←y’ \. \end{matrix}$由此得出位移translate(a, b)==matrix(1,0,0,1,a,b)x’ = x+ay’ = y+b缩放scale(A, B)==matrix(A, 0, 0, B, 0, 0)x’ = Axy’ = By旋转rotate(deg)==matrix(cos,sin,-sin,cos,0,0)x’ = xcos-ysiny’ = xsin+ycos拉伸skew(deg,deg)==matrix(1,tan(),tan(),1,0,0)x’=tan()yy’=tan()xmatrix3dmatrix3d的坐标系与数学中的不太一样,如图新旧像素位置转换如下:$ \begin{bmatrix} a &d &g&j \ b & e &h&k \ c & f &i&l\0 &0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \ y\z \1 \end{bmatrix}=\begin{bmatrix} x’ \ y’ \z’\1 \end{bmatrix} $3D transform 中 angle为正是逆时针旋转rotateX( angle )rotateY( angle )rotateZ( angle )缩放scale(A, B, C)==matrix3d(A, 0, 0, 0, 0, B, 0, 0, 0, 0, C, 0, 0, 0, 0, 1)x’ = Axy’ = Byz’ = Cz参考:理解CSS3 transform中的Matrix(矩阵)好吧,CSS3 3D transform变换,不过如此!