transform 属性之 matrix 方法其一

本文为解析 transform 属性系列的第二篇，第一篇详细介绍 2D 转换方法 translte、rotate、scale 和 skew，不了解的童鞋请先移步至上一篇，不然对本篇理解起来会有些困难。

本篇重点介绍 2D 转换方法 matrix。

相对于一般 CSS 的应用来讲，matrix 算是一个 ** 了，这里边涉及到的数学概念较多，对于一些概念不清楚的读者，还望仔细上网查阅。

前方高能，请注意 please！！！

matrix(a, b, c, d, tx, ty)

matrix(a, b, c, d, tx, ty)
使用 6 个值的矩阵来定义 2D 转换。

matrix 与 translate、scale、rotate、skew

从 matrix 的定义可以看出，它的使用明显比 translate、scale、rotate、skew 等转换方法复杂多了。这是为什么呢？

因为之前介绍的转换方法实际上都是由 matrix 实现的，它们只是对 matrix 的一个封装。matrix 与其他方法的关系如下：
matrix & other methods
一般来讲，越是功能强大，就越复杂。从上图来看，matrix 毫无疑问地诠释了这一点。

matrix 矩阵

matrix 方法通过使用矩阵运算来实现元素的转换。2D 转换中 matrix 的各个参数要对应到一个 3*3 矩阵中（请注意 a、b、c、d、tx、ty并不是按照参数顺序横排排列的）：
matrix self
在实际转换过程中，再将 (x, y) 坐标对应到一个 3 * 1 的矩阵中。之后将 matrix 参数组成的矩阵和坐标矩阵进行矩阵相乘，如下图：
matrix * matrix
通过以上矩阵运算，这样就可以得到转换后的 (x’, y’) 的坐标值。
即：

x’ = a * x + c * y + tx
y’ = b * x + d * y + ty

请牢记以上两个公式，在后面会经常用到！

Ps：关于矩阵运算的小提示

两个矩阵相乘，其结果等于第一个矩阵每一行与第二个矩阵每一列对应值相乘之和组成的矩阵。

matrix 实现 translate

回顾一下 translate 的定义：

translate(x, y)
translate 方法用于移动元素，x 代表横向移动距离，y 代表纵向移动距离。

结合矩阵运算公式，可以很容易的得到以下结论：

当 a 和 d 的值为 1，c 和 b 的值为 0 时，tx 和 ty 的值就分别代表了 translate 方法中的横向移动距离和纵向移动距离。
                     x' = a * x + c * y + tx
                     y' = b * x + d * y + ty
                                ↓
                          x' = x + tx
                          y' = y + ty

了解了理论依据，下面用 matrix 来实现 translate 的移动效果：
代码如下：

.matrix-style-translate {
   /* transform: translate(30px, 30px); */
   transform: matrix(1, 0, 0, 1, 30, 30);
}

效果如下：
matrix-translate

matrix 实现 scale

回顾一下 scale 的定义：

scale(widthRatio, heightRatio)
scale 方法用于将元素的尺寸成倍增加或减少。widthRatio 用于指定元素宽度的转换倍率，heightRatio 用于指定元素高度的转换倍率。

结合矩阵运算公式，可以很容易的得到以下结论：

当 c、b、tx 和 ty 的值都为 0 时，a 和 b 的值就分别代表了元素宽度和高度的转换倍率。
                x' = a * x + c * y + tx
                y' = b * x + d * y + ty
                           ↓
                       x' = a * x
                       y' = d * y

明确了转换关系后，我们也可以用 matrix 来实现 scale 的缩放效果：
代码如下：

.matrix-style-scale {
   /* transform: scale(0.5, 0.5); */
   transform: matrix(0.5, 0, 0, 0.5, 0, 0);
}

效果如下：
matrix-scale

未完待续

由于 rotate 和 skew 较为复杂，涉及到三角函数，留到下一篇为大家解析，敬请关注！

更多 CSS 技巧，请关注微信公众号
CSS skill