transform-skew 属性详解 -- 如何判断倾斜的角度

• transform-skew
  • skewX：定义沿着 X 轴的 2D 倾斜转换。
  • skewY：定义沿着 X 轴的 2D 倾斜转换。
  • skew：定义沿着 X 和 Y 轴的 2D 倾斜转换。

我们该如何去判断其倾斜的角度呢？

skewX

我们先对一个 div 进行如下下设置

.box {
      margin: 100px auto;
      width: 300px;
      height: 300px;
      background-color: salmon;
      transform: skewX(10deg);
}

运行结果如下：

此时我们可以发现，div 的右上角与底边所形成的夹角为 10deg

我们也可以再次进行验证

.box {
      margin: 100px auto;
      width: 300px;
      height: 300px;
      background-color: salmon;
      transform: skewX(30deg);
}

运行结果如下：

skewY

我们先对一个 div 进行如下下设置

.box {
      margin: 100px auto;
      width: 300px;
      height: 300px;
      background-color: salmon;
      transform: skewY(10deg);
}

运行结果如下：

此时我们可以发现，div 的左下角与底边所形成的夹角为 10deg

我们也可以再次进行验证

.box {
      margin: 100px auto;
      width: 300px;
      height: 300px;
      background-color: salmon;
      transform: skewY(30deg);
}

运行结果如下：

skew

我们可以理解同时 skew 为 skewX 和 skewY 的叠加状态

我们先对一个 div 进行如下下设置

.box {
      margin: 100px auto;
      width: 300px;
      height: 300px;
      background-color: salmon;
      transform: skew(10deg,10deg);
}

运行结果如下：

PS：以上纯属个人理解，如有错误，恳请指正