matrix 2d in CSS3

在css3中有几个函数来确定w3c盒子模型的位置变换和大小以及变形。
由于一下各处代码都基于webkit实现所以，不考虑其他兼容性，只考虑
实现的内部功能机理。

//通常用到的函数，针对w2c盒子模型-webkit-transform:scale(1.5);/*缩放：scale参数假设为x,当x>1,盒子放大；当0<x<1,盒子缩小*/-webkit-transform:translate(30px,40px);/*移动：第一个参数假设为dx,第二个参数dy；  第一个控制在x方向移动，即水平方向移动；  第二个控制y方向移动，即竖直方向移动*/ -webkit-transform:rotate(30deg); /*角度变换：默认为盒子图形的几何中心，旋转默认为逆时针*/

上述除了skew没有介绍之外，其他应该都是经常用到的函数。
但是他们都是matrix的特殊情况，matrix有六个参数，我也随大溜的起名为a,b,c,d,e,f,单位是可以省略的；

-webkit-transform:matrix(1，0，0，1，10，20);//matrix语法在css3中

运算规则用到了大学线性代数的矩阵知识：

这里的x,y都是当前像素点的坐标。
*数学知识的补充：
1>两个矩阵相乘，M[a*b]*N[b*c]=T[a*c]
第一个矩阵列数和第二个矩阵的行数相等。
2>T[ij]=M[i1]*N[1j]+M[i2]*N[2j]+…M[in]*N[nj];(n=1,2,3,….n)
即第一矩阵的行中的第n个元素乘以第二矩阵中相应第n个元素*
举例：
有一个盒子，在网页中它是按照像素来计算的。假如设置了一个div，

div{width:300px;height:300px;}

这里的div被全部分解为1px*1px的小控制点，也就是说有300*300个控制点。这些控制点每个都有一个坐标（x,y）.
matrix会对这些控制点进行遍历迭代，对于每个控制点，在当前坐标(x,y)
进行变换。
x变化：
变换后的坐标：cx=ax+cy+e
y变化：
变换后的坐标：cy=bx+dy+f
上述函数都是matrix在参数固定时的特例。
translate(tx,ty)->matrix(1,0,0,1,tx,ty)
计算：cx=1*x+0*y+tx
cy=0*x+1*y+ty
发现横纵坐标恰巧是当前坐标+tx(ty);
scale(m)->matrix(m,0,0,m,0,0)
rotate(n)->matrix(cosB,sinB,-sinB,cosB,0,0)

matrix可以实现很多特效，但是从数值计算上决定了，完成一个特效是特别复杂的，但恰是如此才能体现其魅力。整天面对一大堆div盒子，也似乎没有什么提升，而matrix和matrix3D正是另一层境界的主要内容。