Page 104 - css揭秘

整个元素应用 3D 变形的，因此它上面的文字也变形了。对元素使用了 3D
变形之后，其内部的变形效应是“不可逆转”的，这一点跟 2D 变形不同
（在 2D 变形的体系之下，内部的逆向变形可以抵消外部的变形效应）。取消
其内部的变形效应在技术上是有可能的，但非常复杂。因此，如果我们想发
挥 3D 变形的功能来生成梯形，唯一可行的途径就是把变形效果作用在伪元
素上。这有些类似于我们在“平行四边形”一节中生成平行四边形的方法： 图 3-42
使用 3D 旋转来创建一个梯形。
.tab { 上图：处理之前
position: relative; 下图：处理之后
display: inline-block;
padding: .5em 1em .35em;
color: white;
}

.tab::before {
content: ''; /* 用伪元素来生成一个矩形 */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: perspective(.5em) rotateX(5deg);
}

正如我们在图 3-43 中所看到的，这个方法确实可以生成一个基本的梯
形。但还有一个问题没有解决。当我们没有设置 transform-origin 属性
时，应用变形效果会让这个元素以它自身的中心线为轴进行空间上的旋转。 图 3-43
因此，元素投射到 2D 屏幕上的尺寸会发生多种变化，如图 3-44 所示：它 如果只对伪元素生成的方块应用
的宽度会增加，它所占据的位置会稍稍下移，它在高度上会有少许缩减，等 3D 变形样式，文本就不受影响了
等。这些变化导致它在设计上很难控制。

为了让它的尺寸更好掌握，我们可以为它指定 transform-origin:
bottom;，当它在 3D 空间中旋转时，可以把它的底边固定住。你可以在图 图 3-44
3-45 中看到这个差异。现在它看起来就直观多了，只有高度会发生变化。 我们把伪元素变形前后的形状重
不过这样一来，高度的缩水会变得更加显眼，因为现在整个元素是转离屏幕 叠起来，以便标示出它在尺寸上
的变化
前的观众的；而在之前，元素的上半部分会转向屏幕后面，下半部分会转出
屏幕。相比之下，在 3D 空间中，之前的元素总体上是离观众更近的。为了
纠正这个问题，我们可能会想到给元素增加额外的顶部内边距。不过在那
些不支持 3D 变形的浏览器中，结果看起来会很怪异（参见图 3-46）。我们
图 3-45
还可以换种思路，同样通过变形属性来改变它的尺寸。这样一来，如果浏览
我们把伪元素变形前后的形状重
器不支持 3D 变形，则所有的变形属性都会被丢弃，从而显示出它朴素的本 叠起来，以便标示出它在尺寸上
来面目。经过一番试验之后，我们会发现，垂直方向上的缩放程度（也就是 的变化（此时使用了 transform-
origin: bottom; 属性）
scaleY() 变形属性）在达到 130% 左右时刚好可以补足它在高度上的缩水：

transform: scaleY(1.3) perspective(.5em)
rotateX(5deg);
transform-origin: bottom;

13 梯形标签页 73

඀ࠡ JOEC