transform 属性之 matrix 实例

不了解 transform 属性的 matrix 方法怎么使用？没关系，请先看这三篇文章：
- transform 属性之简单变换方法
- transform 属性之 matrix 方法其一
- transform 属性之 matrix 方法其二

matrix 回顾

matrix 定义

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

matrix 转换公式

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

matrix 实现对称效果

理论解析

对称效果，即以某一直线为参考，将图形折叠。
考虑将图形分散为很多点，那么沿垂直线的单点对称如下图所示：

从上图对称关系可以得知 x = x’。
假设 A 点坐标为 (x, y)，A’ 的坐标为 (x’, y’)，那么用 A 点来表示 A’ 的坐标即为：

x’ = -x
y’ = y

结合 matrix 转换公式，

x’ = -1 * x + 0 * y + 0
y’ = 0 * x + 1 * y + 0

因此，要实现对称效果，只需将 matrix 方法参数 a、b、c、d、tx、ty 的值分别置为 -1，0，0，1，0，0 即可。

示例代码

.matrix-style-symmetric {
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

运行效果