Skip to content

skew 是用来做倾斜旋转的,说起来很复杂,但实际上就是平行四边形。

![recording 7](/notes-assets/04.CSS3/assets/recording 7.gif)

skew 也是由两个参数组成的,可以看到,skew 的效果就是把一个盒模型变成一个平行四边形,这两个参数都是平行四边形的角度,和前面的一样,skew 变换的也是坐标轴,当使用 skew 倾斜之后,坐标轴就发生了个一个很神奇的变化。

![Pasted image 20240128085103](/notes-assets/04.CSS3/assets/Pasted image 20240128085103.png)

此时坐标轴就不再是垂直的了,而是有一定的夹角,可以看到,由于我写了第一个参数,所以只有 y 轴是斜的。

![Pasted image 20240128085212](/notes-assets/04.CSS3/assets/Pasted image 20240128085212.png)

写上第二个参数之后,x 轴就变斜了,实际上这个坐标轴的倾斜角度就是我们这里填的度数。

注意,这里是反的,第一个参数倾斜的是 y 轴,第二个参数倾斜的是 x 轴

实际上,如果不是极端情况(两条坐标轴平行),skew 保证了盒子面积不变,这就意味着当我让 y 轴旋转的时候,为了让盒子面积不变,y 轴是被拉伸的。

![recording 8](/notes-assets/04.CSS3/assets/recording 8.gif)

很明显,这里 y 坐标的单位长度其实是发生变化了,所以 skew 本身是自带一个拉伸效果的,所以后续的变化都是基于这个拉伸之后的坐标轴。

如果 skew 的度数为正,不管是 x 轴还是 y 轴,都是向第四象限倾斜

以笔记为镜,可以知得失