开发随笔：transform: skew

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轴按照顺逆时针旋转