浅谈CSS3 Matrix 的使用

CSS3的 transform 里有一个方法叫做 Matrix ，该需要六个参数，可以使用数学函数让元素进行旋转、缩放、移动以及倾斜元素。

光是看这名词好像有点吓人，仿佛又回想起当初被数学支配的恐惧。的确，相比那些 translate(25deg) 之类有着明确语义跟容易调用方法外， Matrix 使用起来确实有些复杂~

Matrix 的参数分别有a, b, c, d, e, f六个参数，我们可以分别对应：

transform: matrix(X轴的缩放， X轴拉升, Y轴的拉伸, Y轴的缩放, X轴的位移, Y轴的位移);

这样看上去好像好多了，我们常使用的几个方法也是可以通过Matrix来实现：

元素默认情况下的表现可以用 Matrix 来表示为： matrix(1, 0, 0, 1, 0, 0) ;

通过上面的例子，我们很容易推测出缩放的公式为： translate(sx, sy) 等于 matrix(sx, 0, 0, sy, 0, 0) ;

位移就更简单啦： translate(tx, ty) 等于 matrix(1, 0, 0, 1, tx, ty) ;

拉升则是： skew(degx, degy) 等于 matrix(1, tan(degx), tan(degy), 1, 0, 0)

旋转没有提供相应的参数，他需要套用数学的公式，毕竟这个方法名就是 矩阵 嘛： rotate(deg) 等于 matrix(cos(deg),sin(deg), -sin(deg), cos(deg), 0, 0)

那问题来了，为啥有简单易用的方法不用，我们非要搞这么麻烦的东西呢？这是因为很多时候我们需要高度精确定制动画时，那些简单的方法以及不能满足我们的需求啦~