CSS3的transform和matrix

1、基于矩阵的应用

矩阵（matrix）本是transform属性下的一个方法，而transform属性的其他方法如translate（平移）、scale（缩放）、skew（拉伸）和rotate（旋转）等都是基于矩阵封装的一些方法。在下面的推导中将会看到。

2、transform的坐标系统

我们在使用旋转的时候都会发现，元素是在根据一个中心点进行的缩放与旋转的。那么这个中心点就是transform-origin所指定的那个点。也是所有矩阵运算的依据点，如果这个点发生改变，那么我们对元素进行缩放或旋转的效果都会不一样。

3、矩阵的用法与详解

transform方法的用法如下

transform: matrix(a, b, c, d, e, f);

这6个参数实际上对应着一个三阶矩阵 $\begin{bmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \\ \end{bmatrix}$，那么在进行转换的时候实际上进行了一个矩阵运算： $\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\\ 1 \\ \end{bmatrix}$其中的x和y是元素中的所有坐标，那么我们从上面的式子可以知道转换后的x和y值如下： $x'=ax+cy+e$ $y'=bx+dy+f$

那么上面的计算与我们的缩放，平移这些操作有什么关系呢？我们以平移来举例子。

transfrom: matrix(1, 0, 0, 1, 40, 40);	/*这个写法与translate(40px, 40px)效果一致*/

套用上面我们推导出的公式可知元素新的x和y值为： $x'=x+40$ $y'=y+40$可以看出元素的每个坐标的x和y值都加了40，这就实现了向x和y轴正方向分别平移40像素的效果。

我们再用缩放举个例子，缩放的用法如下：

transform: matrix(2, 0, 0, 2, 0, 0)		/*这个写法与transform: scale(2, 2)效果一致*/

套用上面公式可以得出： $x' = 2x$ $y' = 2y$ 可以看出元素的每个坐标都被放大了两倍，那么就能够实现缩放的效果

其他用法如下

旋转：

transform: matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0) /*效果与transform: rotate(θ)一致*/

拉伸：

transform: matrix(1, tan(θy), tan(θx), 1, 0, 0) /*效果与transform: skew(θ)一致*/