CSS中transform:perspective是否仅适用于3D元素？

TLDR #

你在练习中给四个div单独应用transform: perspective(d);后看不到任何效果，核心原因是：perspective仅在元素存在3D变换（如Z轴位移、3D旋转）时才会生效——它定义的是3D透视空间，但如果元素始终停留在Z=0的2D平面，透视效果没有可体现的载体。

你的问题场景 #

你提到的练习中，所有div都处于默认的2D平面（Z轴位置为0），仅设置perspective属性后没有任何视觉变化，对应的效果截图如下：

你给出的原始代码如下：

原始CSS

body { width: 100%; }
div {
  font-family: Geneva, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
  font-size: 4em;
}
div:nth-of-type(1) { transform: perspective(-100cm); }
div:nth-of-type(3) { transform: perspective(10cm); }
div:nth-of-type(4) { transform: perspective(100cm); }

原始HTML

<body>
  <div>transform: perspective(-100cm);</div>
  <div>No perspective.</div>
  <div>transform: perspective(10cm);</div>
  <div>transform: perspective(100cm);</div>
</body>

为什么perspective没效果？ #

你说得对，所有2D元素本质上都处于3D空间中，但默认是在Z=0的平面上。perspective的作用是定义观察者到这个平面的距离，从而计算3D元素的视觉变形——但如果元素没有在Z轴方向产生位移（比如translateZ()），也没有做3D旋转（比如rotateX()/rotateY()），那么无论观察者离平面多远，看到的元素都是完全一样的，就像你站在不同距离看一张正对着你的平纸，纸的形状不会有任何变化。

如何让perspective生效？ #

只需要给元素添加一个3D变换属性，让它离开Z=0的平面，就能看到透视效果了。比如给每个div加上translateZ()，修改后的代码如下：

修改后的CSS

body { width: 100%; }
div {
  font-family: Geneva, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
  font-size: 4em;
  margin: 20px 0;
}
div:nth-of-type(1) {
  transform: perspective(-100cm) translateZ(5cm);
  /* 负数perspective会反转透视方向，类似从元素背后观察 */
}
div:nth-of-type(2) {
  /* 无透视，作为对比基准 */
}
div:nth-of-type(3) {
  transform: perspective(10cm) translateZ(5cm);
  /* 小透视值=观察者离元素近，Z轴位移的视觉放大效果极强 */
}
div:nth-of-type(4) {
  transform: perspective(100cm) translateZ(5cm);
  /* 大透视值=观察者离元素远，Z轴位移的视觉变化微弱，类似长焦镜头的压缩效果 */
}

修改后的HTML

<body>
  <div>transform: perspective(-100cm) translateZ(5cm);</div>
  <div>No perspective.</div>
  <div>transform: perspective(10cm) translateZ(5cm);</div>
  <div>transform: perspective(100cm) translateZ(5cm);</div>
</body>

修改后你会看到：

• 第三个div（10cm透视）会显得特别大，因为观察者离得近，Z轴正方向的位移让元素“靠近”观察者，视觉放大效果强烈；
• 第四个div（100cm透视）放大效果很弱，类似长焦镜头拍摄的压缩感；
• 第一个div（-100cm透视）会呈现反转的透视效果，像是从元素背后看它。

补充：和摄影透视的关联 #

你对摄影和CSS透视的关联理解非常准确！CSS的perspective确实和摄影镜头焦距异曲同工：

• 小perspective值对应广角镜头，近大远小的透视畸变强烈；
• 大perspective值对应长焦镜头，空间被压缩，透视变化不明显。
  唯一的区别是，摄影中物体本身就在3D空间里，而CSS中需要你主动让元素“进入”3D空间（通过3D变换），透视效果才能显现。

内容的提问来源于stack exchange，提问作者Water Cooler v2