css3---transform: matrix

一.偏移

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)

---

如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。