【CSS3】matrix

matrix使用方法：

transform: matrix(a,b,c,d,e,f);

根据

得到：

x’=ax+cy+e
y’=bx+dy+f

其中，x和y是元素最开始的坐标，x’ 和y’则是通过矩阵变换后得到新的坐标。

需要说明的几点：

1、translate和scale都很好理解，利用公式很容易得到。

2、旋转rotate:比matrix方便多了。

方法以及参数使用如下（假设角度为θ）：

matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

结合矩阵公式，就有：

x' = x*cosθ-y*sinθ+0 = x*cosθ-y*sinθy' = x*sinθ+y*cosθ+0 = x*sinθ+y*cosθ

3、拉伸skew:

拉伸也用到了三角函数，不过是tanθ，而且，其至于b, c两个参数相关，书写如下（注意y轴倾斜角度在前）：

matrix(1,tan(θy),tan(θx),1,0,0)

套用矩阵公式计算结果为：

x' = x+y*tan(θx)+0 = x+y*tan(θx) y' = x*tan(θy)+y+0 = x*tan(θy)+y

对应于skew(θx + "deg"，θy+ "deg")这种写法。