在网页设计中，3D 效果的呈现能够为用户带来更加丰富和沉浸式的体验。当我们使用 transform-style: preserve-3d 来创建 3D 场景时，perspective 属性的设置位置显得尤为关键，通常要将其设置在父元素上，这背后有着重要的原理。

perspective 属性定义了用户与 3D 场景之间的距离，它就像是人眼到屏幕的距离，这个距离会影响元素在 3D 空间中的透视效果。如果将 perspective 设置在子元素上，每个子元素都会有独立的透视效果，这会导致整个 3D 场景的透视不一致，各个子元素看起来像是在不同的空间层次中，无法形成一个统一、和谐的 3D 场景。

而将 perspective 设置在父元素上，就相当于为整个 3D 场景设定了一个统一的观察点和透视规则。所有应用了 transform-style: preserve-3d 的子元素都在这个统一的透视环境下进行渲染，它们之间的 3D 空间关系得以正确呈现，从而形成一个连贯、自然的 3D 场景。

例如，我们创建一个包含多个立方体的 3D 场景，每个立方体都有不同的旋转和位置变化。如果将 perspective 分别设置在每个立方体上，这些立方体在旋转和移动时，它们的透视效果会各自为政，无法产生真实的 3D 空间感。相反，当我们将 perspective 设置在父元素上时，所有立方体都遵循统一的透视规则，在旋转和移动过程中，它们之间的空间关系会符合真实的 3D 视觉效果，用户能够感受到一个完整、逼真的 3D 场景。

在使用 transform-style: preserve-3d 创建 3D 场景时，将 perspective 属性设置在父元素上是确保 3D 效果正确呈现的关键，能够为用户带来更加真实、流畅的 3D 视觉体验。