css3 transform matrix 深入理解

矩阵可以用来表示图形的变换。css3定义了matrix和matrix3d方法，用来表示2维和3维的变换。下文将分析这两个接口的使用方法，并且用下文的思路，实现了一个简单的用js控制css3变换的jquery插件css3js ，

变换矩阵和净变换矩阵

matrix(a,b,c,d,e,f)有六个参数，这六个参数对应到矩阵如下：

$\begin{bmatrix}a & c & e \\b & d & f \\ 0 & 0 & 1\end{bmatrix}$

在图形学上，这种叫做齐次坐标矩阵，用齐次坐标矩阵和图形的顶点相乘，就能得到变换后的新顶点的位置。比如，图形有一个顶点（a，b），现使图形整体延x轴平移100px，平移后该顶点的位置应该是（a+100，b）。很明显，下面的矩阵运算就表示了这个过程：

$\begin{bmatrix}1& 0 & 100 \\0 & 1 & 0 \\ 0 & 0 & 1\end{bmatrix}$ $\times$ $\begin{bmatrix}a \\b \\ 1\end{bmatrix}$ = $\begin{bmatrix} a+100 \\ b \\ 1\end{bmatrix}$

因此，知道了这个齐次坐标矩阵，就可以算出任何一点变换后的位置，所以，这个齐次坐标矩阵就是变换矩阵。

如果该点再次延y轴平移100px，平移后的新位置应该是（a+100,b+100）,则整个过程可表示成：

$\begin{bmatrix}1& 0 & 100 \\0 & 1 & 0 \\ 0 & 0 & 1\end{bmatrix}$ $\times$ ⎡⎣⎢1