4. Skew的用法
transform: skew(x, y)
- x: x轴不动y轴旋转的角度, 正为逆时针, 负为顺时针
- y: y轴不动,x轴旋转的角度, 正为顺时针,负为逆时针
代码验证
<div class="base"></div>
<div class="box"></div>
<div class="box2"></div>
.box, .base, .box2 {
width: 50px;
height: 50px;
margin: 50px 10px;
background: red;
}
.box,.base {
display: inline-block;
}
.box {
transform: skew(30deg, 0deg);
}
.box2 {
transform: skew(0deg, 30deg);
}
结果展示
Notes: 设置了skewX, 则x的宽度不变,y轴按照顺逆时针旋转,
设置了skewY, 则y的宽度不变,x轴按照顺逆时针旋转