《CSS揭秘》笔记（十）， 梯形效果

梯形效果

3D旋转模拟

并没有一组2D变形属性能生成一个梯形，但是我们可以利用透视关系在css中用3D旋转来模拟出这个效果：

.box1{
  width: 100px;
  height: 50px;
  margin: 20px;
  background-color: #58a;
  transform: perspective(.5em) rotateX(5deg);
}

但是如图所示，它依然有瑕疵，容器中的文字也跟着变形了。然而，与2D图形不同的是，它的内部的变形效果是不可逆转的，不能使用逆向变形的来抵消外部变形。

因此我们可以用伪元素的方案把变形效果作用在伪元素上。

.box2{
  position: relative;
  display: inline-block;
  padding: .5em 1em .35em;
  color: white;
}
.box2::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: #58a;
  transform: perspective(.5em) rotateX(5deg);
}

然而这个方案依然存在着问题，我们还未设置transform-origin，因此应用的变形效果会让这个元素以它自身的中心线为轴进行空间上的旋转，它的尺寸会比较难以掌握。

为了让它的尺寸更好掌握，可以为它指定transform-origin: bottom;，当它在3D空间中旋转时，可以把它的底边固定住，致使它只会有高度上发生变化。在垂直方向的缩放程度（也就是scaleY()变形属性到达130%时，可以弥补变形时高度上的缩水。

.box3{
  position: relative;
  display: inline-block;
  padding: .5em 1em .35em;
  color: white;
  }
.box3::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: #58a;
  transform-origin: bottom;
  transform: perspective(.5em) rotateX(5deg) scaleY(1.3) perspective(.5em);
}

我们把transform-origin修改成bottom left或bottom right，就可以立即得到左侧倾斜或右侧倾斜的梯形。

然而需要注意的是以上的效果中的斜边角度依赖于元素的宽度，对于内容长度不等却想要得到斜度一致的梯形就不合适了。

本篇文章是《CSS揭秘》一书的笔记，如果侵犯到了原著作者的权益，请联系我删除。