CSS3 3D变形制作梯形标签页

有了css3的3d变形功能之后，写一个梯形出来就不需要再用border搭两个三角形在两边了。

border边框方法添加三角形

现在我们用3D旋转来实现这个效果。
首先想象一个在3D环境下的矩形：

我们让它以水平方向上的X轴为轴线旋转，由于透视的关系，呈现在我们眼前的不就是一个梯形吗！

但是在这里也发现了两个问题：

字体也跟着背景色一起旋转了。
解决这个问题的方法就是，把变形效果作用在伪元素上。

<div class="two">trapezoid</div>

.two{
      font-size:24px;
      padding:.5em 2em .5em;
      display:inline-block;
      position:relative;
}
.two::before {
      content:'';    /*用伪元素来生成一个矩形*/
      position:absolute;
      top:0; right:0; bottom:0; left:0;
      background:#F6DEE9;
      z-index:-1;    /*背景色要在文字的下一层，以免挡住文字*/
      transform:perspective(100px) rotateX(30deg);
}

字体没有跟着一起旋转

旋转之后，它的底边宽度变长了，底部的位置也与之前不一致，这是因为当我们没有设置 transform-origin 属性时，应用变形效果会让这个元素以它自身的中心线为轴进行空间上的旋转。此时，我们可以指定它的 transform-origin: bottom；，当它在3D空间旋转时，把底边固定住。

  transform:perspective(100px) rotateX(30deg);
  transform-origin: bottom;

现在我们可以看得出来，底部对齐了，但是它的高度却变短了，此时，垂直方向上的缩放程度（ rotateY()变形属性）在达到145%之后可以补足它在高度上的缩水。

  transform: scaleY(1.45) perspective(100px) rotateX(30deg);
  transform-origin: bottom;

在这之后，还可以为标签页增加一些样式：

 content:'';
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  background:#F6DEE9;
  background-image:linear-gradient(
                    rgba(255,255,255,.8),
                    rgba(255,255,255,0));  /*添加一层白色的渐变*/
  z-index:-1;
  transform: scaleY(1.45) perspective(100px) rotateX(30deg);
  transform-origin: bottom;
  border-radius: .5em .5em 0 0;
  border:2px solid #fbabd1;   /*描边*/
  border-bottom:none;   /*去掉底边框*/
  box-shadow: 0 .1em white inset;  /*白色的内阴影，打造高光的效果*/

参考书籍：Lea Verou《CSS揭秘》

CSS3 3D变形制作梯形标签页

推荐阅读更多精彩内容