一.偏移
transform: matrix(a,b,c,d,e,f);
a 水平缩放、b 水平拉伸、c 垂直拉伸、d 垂直缩放、x 水平位移、y 垂直位移
1. 6个数的相对应矩阵:
| a | c | e |
|---|---|---|
| b | d | f |
| 0 | 0 | 1 |
| 公式: | ||
| X = ax + cy + e | ||
| Y = bx + dy + f | ||
| x, y表示转换元素的所有坐标（变量) |
2. 假设矩阵参数如下：
transform: matrix(1, 0, 0, 1, 30, 30); /* a=1, b=0, c=0, d=1, e=30, f=30 */
根据这个矩阵偏移元素的中心点，假设是(0, 0)，即x=0, y=0。
X = ax + cy + e = 10 + 00 + 30 = 30
Y = bx + dy + f = 00 + 10 + 30 = 30
中心点坐标从(0 ,0)变成了-> (30 ,30),相当于往右下方偏移了30像素;
实际上: transform: matrix(1, 0, 0, 1, 30, 30); 等同于 transform: translate(30px, 30px); 注意: translate需要单位, 而matrix不需要
总结:
transform: matrix(X, X, X, X, 水平偏移距离, 垂直偏移距离); 最后面两个参数是偏移属性
二.缩(scale)放,拉伸
transform: matrix(1, 0, 0, 1, 30, 30);
1. matrix(1, 0, 0, 1, 30, 30);的元素比例与原来一样，1:1;其中，第一个缩放x轴，第二个缩放y轴。
2.假设比例是s，则有matrix(s, 0, 0, s, 0, 0);
套用公式:
X = ax + cy + e = sx + 0y + 0 = sx
Y = bx + dy + f = 0x + sy + 0 = sy
也就是matrix(sx, 0, 0, sy, 0, 0);，等同于 scale(sx, sy);
三.旋转(rotate)
公式:
matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
旋转30度:
transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0);
等同于: transform:rotate(30deg);
四.拉伸(skew)
公式:
matrix(1,tan(θy),tan(θx),1,0,0)
等同于: skew（θxdeg，θydeg)