今天的需求有一个要用到获取元素对象的缩放比例,这很简单啊!
.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操作值的对应关系作个总结:
-
scale 缩放
scale(x, y) = matrix(x, 0, 0, y, 0 ,0)
-
translate 平移
translate(x, y) = matrix(1, 0, 0, 1, x, y)
-
rotate 旋转
rotate(x) = matrix(cos(x), sin(x), -sin(x), cos(x), 0, 0)
-
skew 变形
skew(x,y) = matrix(1, tan(y), tan(x), 1, 0, 0)
今天就记录到这里,下次再做一次深的总结!