perspective属性设置在父元素和后代元素上，对3D效果有什么区别？

perspective属性的位置对3d效果的影响

通常情况下，perspective属性需要设置在应用了transform-style: preserve-3d属性的父元素上。然而，如果perspective属性设置在后代元素上会产生不同的效果。

为了演示区别，让我们扩展已有的示例：

<div class="scene">
  <div class="cube">
    <div class="cube__face cube__face_front">front</div>
    <div class="cube__face cube__face_back">back</div>
    <div class="cube__face cube__face_right">right</div>
    <div class="cube__face cube__face_left">left</div>
    <div class="cube__face cube__face_top">top</div>
    <div class="cube__face cube__face_bottom">bottom</div>
  </div>
</div>

如果perspective属性设置在.scene元素上，3d效果将正常工作：旋转.cube时，每个面都保持平坦，没有变形。

.scene {
  perspective: 600px;
}

但是，如果将perspective属性移动到.cube元素上：

.cube {
  perspective: 600px;
}

3d效果就会发生变化。旋转.cube时，面会变形，失去平整度。这是因为perspective属性决定了"视角z轴"的位置，如果视角z轴在.cube元素上，旋转时实际上是旋转了变形的cube。

因此，为了获得正确的视角拉远效果，perspective属性通常应该设置在transform-style: preserve-3d元素的父元素上。

以上就是perspective属性设置在父元素和后代元素上，对3D效果有什么区别？的详细内容，更多请关注其它相关文章！