梯形标签页

在三维世界，沿着水平方向（x轴）旋转一个矩形，由于透视的关系，我们最终看到的是一个梯形。

div {
  width: 60px;
  height: 30px;
  background: burlywood;
  transform: perspective(0.5em) rotateX(5deg);
}

效果图：

Hello

和 2D 不一样，对元素进行 3D 变形后，其内部的变形是不可逆转的。所以应该把变形应用到伪元素上。

div {
  position: relative;
  width: 60px;
  height: 30px;
}
div::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: burlywood;
  transform: perspective(0.5em) rotateX(5deg);
}

效果图：

Hello

上面的形变是以中心线为轴进行旋转，这会导致在视觉上，高度会减少，宽度会增加，占据的位置会偏下，更好的形变方式是以元素底边为旋转轴： transform-origin: bottom

效果图：

Hello

这会导致另一个问题，上下的边距不一致，解决方法是利用scaleY增加高度。

div {
  position: relative;
  width: 60px;
  height: 30px;
}
div::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: burlywood;
  transform-origin: bottom;
  transform: scaleY(1.3) perspective(0.5em) rotateX(5deg);
}

效果图：

Hello

把 transform-origin 改成 bottom left或bottom right，就可以得到左侧倾斜或右侧倾斜的梯形：

Hello