前端开发中需要用到的变换矩阵
by
at 2012-02-16 09:06:44
original http://shawphy.com/2011/01/transformation-matrix-in-front-end.html
想写写关于矩阵变换的博文已经想了很久了，今天看到 winter 写的一篇博客CSS3:transform与transition背后的数学原理，于是就促成了本文。注意，下面的演示内容需要现代浏览器支持。比如Chrome/Firefox/Opera。阅读器中无法看到演示。
矩阵是线性代数中的内容，在计算机图形学中就拿来做矩阵变换。在以前，对于前端工作来说，几乎用不到矩阵变换。然而，随着浏览器的进步，HTML5和CSS3的普及，对于前端可以操作的东西越来越多，于是，矩阵变换也出现在视野当中了。
矩阵变换，听起来是一个挺高级的东西，其实本质上只不过是把一系列简单的数学运算给包装一下，赋予一个比较华丽和高深的外表而已。如果你之前没有接触过矩阵运算，也不用慌，跳过下面矩阵公式，直接看每条后面的黑体字公式即可。这些公式仅仅涉及高中水平的加减运算和三角函数而已。除了最开始的时候我会搬出那个矩阵，之后的讨论我会避开矩阵的公式，直接用容易理解的方式阐述问题。
最早浏览器中支持的矩阵变换可能是在SVG的标准中。之后跟图形带点边的CSS 3以及HTML5的Canvas中也有了矩阵变换，当然强大的Flash以及Flex中也有变换矩阵。他们的基本原理都是一样的。目前2D的矩阵变换已经有不少浏览器支持了，而3D的变换还需时日。
说了半天矩阵变换，其实本质上来说，一个元素渲染后就可以得到一张位图，然后对这个位图上每一点进行变换，就可以得到新的一张位图，从而产生平移、缩放、旋è