矩阵matrix和transform-origin

五、矩阵matrix

matrix(<number>, <number>, <number>, <number>, <number>, <number>):以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵。就是基于水平方向和垂直方向重新定位元素。

SVG，css3，html5的canvas中都有矩阵变换，接下来简单说说。

一个元素渲染后就可以得到一张位图，然后对这个位图上每一点进行变换，就可以得到新的一张位图，从而产生平移，缩放，旋转，切变及镜像反射灯效果。

1、几个概念

• 矩阵乘法中，首先要确认两个矩阵是否可以相乘：只有第一个矩阵的列数等于第二个矩阵的行数，这样的两个矩阵才能相乘。
• 左乘【前乘】：即乘在左边，A左乘E即AE。
• 一个m*n的矩阵左乘一个n*p的矩阵，将得到一个m*p的矩阵。

2D矩阵变换都提供6个参数a,b,c,d,e,f，基本公式为：

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

Note:变换矩阵中a,b,c,d,e,f6个参数是竖着排的。

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

2、矩阵变换和transform的关系

a、矩阵和translate平移

x'=ax+ cy+e，我们设a=1,c=0,则x'=x+e，

y'=bx+dy+f,同样设b=0,d=1,则y'=y+f。

这就是translate(e,f)了。

所以说translate(e,f)就是简化了的变换矩阵matrix(1,0,0,1,e,f)，

(x,y)平移(tx,ty)，就意味着做了一个【1 0 0 1 tx,ty】的矩阵变换。

b、矩阵和scale缩放

x'=ax+cy+e，我们设c=0,e=0,则x'=ax，

y'=bx+dy+f,我们设b=0,f=0,则y'=dy。

这就是scale(a,d)了。

所以说scale(a,d)就是简化了的变换矩阵matrix(a,0,0,d,0,0)。

(x,y)缩放（sx,sy），就意味着做了一个【sx 0 0 sy 0 0】的矩阵变换。

c、矩阵和rotate旋转

rotate(a deg)等价于【cons(a) sin(a) -sin(a) cons(a) 0 0】矩阵变换。

d、矩阵和skew切变

skewX(a deg)等价于【1 0 tan(a) 1 0 0】的矩阵变换。

skewY(a deg)等价于【1 tan(a) 0 1 0 0】的矩阵变换。

所以说Matrix就是将所有的2D效果全部组合在了一起使用。

六、transform-origin

前面说了，元素默认的基点是其中心位置，可用transform-origin改变其基点。

使用：

transform-origin(x,y):用来设置元素的基点（参考点）。默认点是元素的中心点。x，y的值可以是百分比，em,px，其中x也可以是left,center,right，y可以是top,center,bottom，这点和background-position一样。

本文转自：http://www.cnblogs.com/starof/p/4560076.html