css3中transform与matrix矩阵对应关系

今天的需求有一个要用到获取元素对象的缩放比例，这很简单啊！

.container {
	transform: scale(0.9,0.9)
}

var scale = $('.container').css('transform');

然后就是：matrix(0.9, 0, 0, 0.9, 0, 0)

一脸懵D啊！？！？！？！？！！？！
这是个什么鬼？？？？？

然后各种找，才知道这其实是因为在css中对transform的操作都是基于矩阵的操作，我们所写的scale、translate等操作都会被浏览器解析成matrix矩阵，浏览器根据这个矩阵进行后续的scale、translate操作。

在css中transform对应的matrix矩阵关系是transform: matrix(a,b,c,d,e,f)，写成数学关系式就就是

我们对元素的2D操作都是基于x、y轴的，所以写成对应的数学操作就是

下面对相关2D操作值的对应关系作个总结：

1. scale 缩放
   

   scale(x, y) = matrix(x, 0, 0, y, 0 ,0)
   

2. translate 平移
   

   translate(x, y) = matrix(1, 0, 0, 1, x, y)
   

3. rotate 旋转
   

   rotate(x) = matrix(cos(x), sin(x), -sin(x), cos(x), 0, 0)
   

4. skew 变形
   

   skew(x,y) = matrix(1, tan(y), tan(x), 1, 0, 0)
   

今天就记录到这里，下次再做一次深的总结！