matrix() 在css上的应用

matrix(n,n,n,n,n,n)包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

实现平移

在CSS3中我们矩阵的原始值是这样的
transforms:matrix(1,0,0,1,0,0);
对应的矩阵为:
adair

那为了便于描述我们把它写成:transforms:matrix(a,b,c,d,e,f);矩阵为:
Adair

根据我们上面说的用矩阵与向量的乘法来施加运动,我们就可以来看一下它到底是怎么运动起来的
Adair
这么一来我们可以得到一个式子就是:
x’=ax+cy+e
y’=bx+dy+f(x’和y’就是我们变换后的水平位置坐标和垂直位置坐标)
结论:平移只有跟e和f有关系,跟其他a,b,c,d没有关系,它们该怎么样还是怎么样,e对应x轴的平移,f对应y轴的平移,往正方向平移多少单位就加上多少单位,反之则减去多少个单位。

实现缩放

matrix(sx, 0, 0, sy, 0, 0) === scale(sx, sy)
x’ = sxx
y’ = sy
y

实现旋转

matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0) === rotate(θ + “deg”)
顺序为 CS - SC ;
x’ = x*cosθ - y sinθ
y’ = x
sinθ + y *cosθ
需要传入具体的 cos 或者 sin 值。

实现斜切

matrix(1, tan(θy), tan(θx), 1, 0, 0) === skew(θx + “deg”, θy + “deg”)
x’ = x * tan(θx)
y’ = y * tan(θy)

发布了13 篇原创文章 · 获赞 2 · 访问量 430

猜你喜欢

转载自blog.csdn.net/qq_44605933/article/details/99879952