一文搞懂transform: skew

如何理解斜切skew,先看一个demo。在下面的demo中,有4个正方形,分别是

红色:不做skew变换,
绿色:x方向变换,
蓝色:y方向变换,
黑色:两个方向都变换,

拖动下面的滑块可以查看改变skew角度后的效果。切换selector可以设置transform-origin,origin默认是 0% 0%。大家可以把玩一下。

如果你把滑块拖到了90deg或者-90deg,那么你应该可以回答上面的问题了。如果你在chrome上看到整个页面变白,可以到隔壁firefox上试试,就这个demo而言,火狐是表现最好的,safari最差。

用左扭,右扭来理解skew可能更加符合我们的直觉,但是却是不准确的。拿绿色正方形来说,origin在 0% 0%时,skew 20度看起来像是往右扭,但是origin变成 100% 100%时,看起来又像是往左扭了。

那么到底该怎么理解这个skew变换呢,其实它是矩阵matrix变换的一种。关于矩阵变换,张鑫旭老师的这篇文章讲解的不错,传送门,其中提到skew变化和通用matrix变换的对应关系:

matrix(1,tan(θy),tan(θx),1,0,0) // 对应于 skew(θx + "deg",θy+ "deg")

也就是说matrix函数的第二三个参数来控制图形的斜切的,更通用一点,下面这个图展示了 css matrix 中的6个参数分别控制哪种变换,我们可以看一下:

uploading-image-154244.png

写到matrix函数里面如下:

matrix(SCALE_X, SKEW_Y, SKEW_X, SCALE_Y, TRANS_X, TRANS_Y)

有同学问了,为什么没有旋转的参数啊,其实旋转是scale和skew的组合操作。但是为了保证旋转后和原来的形状保持一致,4个参数应该存在如下关系:

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

换句话说,旋转是一组特定的scale + skew组合操作。

理解坐标系

在了解到skew其实是一种矩阵变换后,我们来了解一下浏览器里的坐标系。因为除了transform,其他操作都受坐标原点的影响。在浏览器中,向下为Y轴正方向,向右为x轴正方向,唯独原点是不确定的,而这正是transform-origin所起的作用。
当你设置这个属性为top left时,就是说矩阵变换坐标系的原点位于左上角,从而得到图形中的各个点的坐标,通过矩阵运算得到变换后的坐标,最后由浏览器渲染出来。设置为50% 50%则意味着坐标原点在图形的中心。

复合变换

思考下面两行css:

transform: rotate(45deg) skew(20deg,20deg) transform: skew(20deg,20deg) rotate(45deg)

对两个个正方形分别做上述变换,出来的效果是不同的,原因是因为上面两个操作,相当于对坐标进行两次矩阵乘法运算,不同于普通的乘法运算,矩阵乘法运算是不存在交换率的,所以结果会不同。

参考文章:
https://www.cnblogs.com/TianFang/p/3920734.html
https://code-industry.net/masterpdfeditor-help/transformation-matrix/
https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%e7%9f%a9%e9%98%b5/
https://blog.csdn.net/u012964944/article/details/77824768
https://www.jianshu.com/p/956d54376338

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgyxpz.html