共计 1216 个字符，预计需要花费 4 分钟才能阅读完成。
matrix
transform 中有这么几个属性方法
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’ = A*xy’ = B*y
旋转 rotate(θdeg)==matrix(cosθ,sinθ,-sinθ,cosθ,0,0)x’ = xcosθ-ysinθy’ = xsinθ+ycosθ
拉伸 skew(αdeg，βdeg)==matrix(1,tan(β),tan(α),1,0,0)x’=tan(α)*yy’=tan(β)*x
matrix3d
matrix3d 的坐标系与数学中的不太一样，如图
新旧像素位置转换如下：$ \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’ = A*xy’ = B*yz’ = C*z
参考：理解 CSS3 transform 中的 Matrix(矩阵)好吧，CSS3 3D transform 变换，不过如此！
