从矩阵与空间操作的关系理解 CSS3 的 transform

那么任意向量 (x, y) 在经过变换后的坐标计算如下：

这告诉我们另外一个事实，二维空间的线性变换仅由四个数字完全确定，这四个数字就是基向量 i 变换后 i 帽 的坐标，以及基向量 j 变换后 j 帽 的坐标，如下图：

是不是很酷？只需要四个数字，我们就确定了二维空间的一个变换。通常，我们把这四个数字放到一个 2 x 2 的格子中，我们称之为 2 x 2 矩阵：

现在，当你再看到 2 x 2 矩阵的时候，你的第一几何直观反映应该是：它描述了一个二维空间的变换。

我们把情况一般化，如下图：

我们有一个 2 x 2 的矩阵 [a, c] [b, d]，其中 [a, c] 是基向量 i 变换后的坐标，[b, d] 是基向量 j 变换后的坐标，那么根据这个变换，以及线性变换的性质，我们可以推断出任意向量 [x, y] 变换后的坐标：

实际上，这就是数学家之所以这样定义 矩阵的向量乘法 的原因。

到了这里，让我们整理一下思路，首先，对于一个 2 x 2 的矩阵，你的直观几何感受应该是，第一列的两个数是对基向量 i 的变换，第二列的两个数是对基向量 j 的变换，这四个数字组成的 2 x 2 的矩阵，描述了一个对空间的线性变换，我们可以根据这个变换推断出任意一点(或者任意向量)变换后的坐标。

其实我么你还可以换一个角度考虑，我们就单纯的把 2 x 2 矩阵叫做变换，那么向量与矩阵的乘积，就要可以看做是该向量应用了这个变换。其实，这就是矩阵向量乘法的几何意义。

回到 CSS 的 transform

说了一大堆，是时候回到 CSS 的 transform，我们来看一下 2D 变换下 transform 属性的 matrix 写法：

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

在文章开始，我们知道各个参数默认值如下：

transform: matrix(1, 0, 0, 1, 0, 0); 

有的同学可能会问：说好的 2 x 2 矩阵也就是四个数字就能确定一个二维空间变换，你这里明明有 6 个数啊，其实，transform 2D 变换是一个 3 * 3 的矩阵，为什么是这样？因为：*位移(translate)*，前面我们说过，线性变换要满足其中一个特点：原点不能移动，但是位移却使原点发生了移动，所以 2 x 2 矩阵满足不了需求，只能再加一列，也就是 3 x 3 的矩阵。

把 matrix 中的 a b c d e f 放到一个 3 x 3 的矩阵中应该是这样的：

其实，在没有位移(translate)的情况下，[a, b] [c, d] 四个数字组成的 2 x 2 矩阵是完全可以描述 2D 变换的，现在我们只看由 [a, b] [c, d] 组成的 2 x 2 矩阵：

我们把 a b c d 四个数字使用默认值替换一下，即：a = 1，b = 0，c = 0，d = 1，如下：

通过之前的介绍，我们在看到这个矩阵的时候，应该知道，第一列的坐标 (1, 0) 应该是基向量 i 变换后的坐标，但是基向量 i 在变换前的坐标就是 (1, 0)，也就是说没有任何变换，同理，基向量 j 也没有任何变换，所以说，这就是 a b c d 默认值设定为下面代码所示的值的原因：

transform: matrix(a, b, c, d, e, f); // a b c d 默认值为 1 0 0 1 transform: matrix(1, 0, 0, 1, e, f); 

那么大家想想一下，我们把 a 的值从 1 变为 2 会发生什么？如果把 a 的值从 1 变为 2 那么矩阵如下：

也就是说，基向量 i 的坐标从 (1, 0) 变成了 (2, 0)，这是在干什么？是不是基向量 i 被放大为了原来的二倍？举一个通俗的例子：原本单位长度 1 代表 20px，被放大后单位长度 1 则代表 40px。同样的，当我们把 a 的值从 1 变为 0.5 则意味着把基向量 i 缩小为原来的一半。事实上：在 transform: matrix() 中，修改 a 的值，就是在改变 x 轴方向的缩放比例：

transform: matrix(2, 0, 0, 1, 0, 0); /* 等价于 */ transform: scaleX(2); 

相信大家已经知道了，修改 d 的值，就是改变 y 轴的缩放比例：

transform: matrix(1, 0, 0, 4, 0, 0); /* 等价于 */ transform: scaleY(4); 

那么旋转要如何修改 matrix 中的值呢？其实，想要知道如何修改 a b c d 的值，只需要知道，旋转后基向量 i 和 j 的坐标就可以了，将旋转后的坐标对号填入就可以得到变换矩阵，下面，我们就来看看如何确定旋转后基向量 i 和 j 的坐标。

我们知道，在 web 开发中的坐标系和数学中的坐标系在正方向的选取上不太一致，在大家所熟悉的坐标系中，正方向的选取如下：

而在 web 开发中，坐标系的正方向选取是这样的：

假设我们将其顺时针旋转 45 度，如下图：

假设，上图中我们旋转的是单位向量，那么旋转后单位向量 i 的坐标应该是 (cosθ, sinθ)，单位向量 j 的坐标应该是 (-sinθ, cosθ)，所以如果用矩阵表示的话，应该是这样的：

如果写到 matrix 里，自然就是下面这个样子：

transform: matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0) 

所以，如果我们要顺时针旋转 45 度，下面两种写法是等价的：

/* * Math.cos(Math.PI / 180 * 45) = 0.707106 * Math.sin(Math.PI / 180 * 45) = 0.707106 */ transform: matrix(0.707106, 0.707106, -0.707106, 0.707106, 0, 0) /* 等价于 */ transform: rotate(45deg); 

通过上面缩放和旋转的例子，我们已经知道了，2 x 2 的矩阵确实能够描述二维空间的变换，这也就是矩阵能够操作空间的原因。在 transform 中，除了缩放(scale)、旋转(rotate) 还有倾斜(skew)，对于倾斜，类似于我们寻找旋转后基向量的坐标一样，你只需要根据倾斜所定义的变换规则，找到基向量变换后的坐标就可以了，实际上倾斜对应如下规则：

transform: matrix(1, tan(θy), tan(θx), 1, 0, 0); 

大家自己拿只笔在纸上画一画应该就能搞清楚倾斜在做什么样子的变换。

无论 缩放(scale)、旋转(rotate) 还是倾斜(skew)，他们都不会是原点发生改变，所以使用 a b c d 四个数字组成的矩阵完全可以描述，但是不要忘了，我们还有一个 位移(translate)，这时，就不得不提到 e f 了，我想我不说大家也都知道了，e f 分别代表了 x y 方向的位移，事实也如大家所想：

transform: matrix(1, 0, 0, 1, 100, 200) /* 等价于 */ transform: translateX(100px) translateY(200px); 

至此，transform 使用 3 x 3 矩阵： 来描述二维空间变换的方式，以及是如何做到的我们就算讲完了。

除了 2D 变换，还有 3D 变换，在 transform 中，使用 4 x 4 的矩阵描述 3D 变换，但实际上，三维空间的线性变换只需要一个 3 x 3 的矩阵就可以描述了，那么为什么搞了一个 4 x 4矩阵呢？实际上这和我们在将二维空间的变换使用 3 x 3 矩阵的道理是一样的，那就是位移。

我们来看一下 3D 变换的 matrix 默认值：

transform: matrix(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p); transform: matrix(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 

这十六个数字就是 4 x 4 矩阵的 16 个数值：

如果换成对应数字，是这样的：

类似于我们讲解 2D 变换一样，其中由 组成的 3 x 3 矩阵用来描述空间的 3D 线性变换，如：rotateX rotateY scaleZ 等等，注意：rotateZ 是 2D 变换哦。

而 m n o 则分别用来描述位移：translateX translateY translateZ。