matrix() 在css上的应用

matrix（n,n,n,n,n,n）包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

实现平移

在CSS3中我们矩阵的原始值是这样的
transforms:matrix(1,0,0,1,0,0);
对应的矩阵为：

那为了便于描述我们把它写成：transforms:matrix(a,b,c,d,e,f);矩阵为：

根据我们上面说的用矩阵与向量的乘法来施加运动，我们就可以来看一下它到底是怎么运动起来的

这么一来我们可以得到一个式子就是：
x’=ax+cy+e
y’=bx+dy+f（x’和y’就是我们变换后的水平位置坐标和垂直位置坐标）
结论：平移只有跟e和f有关系，跟其他a,b,c,d没有关系，它们该怎么样还是怎么样，e对应x轴的平移，f对应y轴的平移，往正方向平移多少单位就加上多少单位，反之则减去多少个单位。

实现缩放

matrix(sx, 0, 0, sy, 0, 0) === scale(sx, sy)
x’ = sxx
y’ = syy

实现旋转

matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0) === rotate(θ + “deg”)
顺序为 CS - SC ；
x’ = x*cosθ - y sinθ
y’ = xsinθ + y *cosθ
需要传入具体的 cos 或者 sin 值。

实现斜切

matrix(1, tan(θy), tan(θx), 1, 0, 0) === skew(θx + “deg”, θy + “deg”)
x’ = x * tan(θx)
y’ = y * tan(θy)