css3 transform中的matrix的理解

在现代浏览器,使用css3的transform,我们可以很容易对元素进行移动、缩放、旋转、拉伸操作,分别对应translate,scale,rotate,skew,其实还有一个更加复杂的属性,就是matrix矩阵,使用matrix可以实现上述几个属性的所有效果。

语法

transform: matrix(a,b,c,d,e,f);

看起来好多参数,实际上,这6个参数,对应矩阵就是:

注意书写的方向是竖着的

其计算方法就是大学时候线性代数的知识了,转换方式如下:

与该矩阵 做运算可以得到

那么ax+cy+e就是代表变换后的水平坐标,bx+dy+f表示变换后的垂直坐标。

偏移(translate)

以如下为例:

transform: matrix(1, 0, 0, 1, 30, 30); /* a=1, b=0, c=0, d=1, e=30, f=30 */

假定矩阵元素偏移中心点为(0,0),即x=0,y=0

于是,变换后的x坐标就是ax+cy+e = 1*0+0*0+30 =30, y坐标就是bx+dy+f = 0*0+1*0+30 =30

实际上transform: matrix(1, 0, 0, 1, 30, 30);就等同于transform: translate(30px, 30px);. 注意:translate, rotate等方法都是需要单位的,而matrix方法e, f参数的单位可以省略。

所以可以看出,元素的偏移只和matrix的最后两个参数有关,e代表的是水平偏移量,f代表的是垂直偏移量。

缩放(scale)

可能已经发现了,matrix参数中包含这个两个1,猜想可能这两个参数会与缩放有关。的确,a代表的x轴,d代表的是y轴。那么matrix(sx,0,0,sy,0,0)等同于scale(sx,xy)

旋转(rotate)

这个比较复杂,需要借助三角函数来计算角度。

方法以及参数使用如下(假设角度为θ):

matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

感觉这个用起来挺麻烦的,没有rotate直接写角度值来的直接。

拉伸(skew)

拉伸也需要借助于三角函数tanθ,并且只与b,c两个参数有关。使用方法如下:

matrix(1,tan(θy),tan(θx),1,0,0)

对应于skew(θx + "deg",θy+ "deg")这种写法。

其中,θx表示x轴倾斜的角度,θy表示y轴,两者并无关联。

注:本文内容借鉴于 张鑫旭 大神的博客内容。

如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注