矩阵变化和坐标

原文地址：/article/4811966.html
http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

=============================================

在开始之前，首先来复习下一个简单的线性代数知识：矩阵与向量乘法。太复的用不到，只需要3维向量与3x3矩阵的乘积：



接下来我们来说说transform跟矩阵乘法的关系，我们的任何一个html元素渲染完成后可以得到一张位图，把这张位图上所有的点都做一次矩阵运算，将得到一张的新的位图，这就是transform的基本含义。

首先来看最简单的transform，translate。我们都知道tansform:translate(tx,ty);的基本含义是将一个元素的显示位置平移tx,ty。在矩阵变换中，translate体现为下面的矩阵运算：



tansform:scale(sx,sy);将一个元素拉伸或者压缩指定的倍数，它对应的矩阵变换是：



transform:rotate(a)将一个元素旋转角度a，它对应的矩阵变换是：



transform:skew(ax,ay)将一个元素研x向和y向倾斜角度ax和ay，它对应的矩阵变换是：



transform:matrix(a,b,c,d,e,f)则是完整的矩阵变换，把这张位图上所有的点都做一次矩阵乘法，得到的新位图