css - Y 平面怎么看起来更远了？

Question

如果你看这个旋转的cube您可以从 css 中看到，所有边都在同一位置开始，然后使用 CSS 将其推离立方体的中心。例如其中一侧有....

-webkit-transform: rotateX(90deg) translateZ(200px);

然后通过旋转围绕所有边的 div 来旋转立方体。例如……

-webkit-transform: rotateX(0deg) rotateY(-90deg);

我想不通的是立方体是如何旋转到屏幕中比屏幕前面“更远”的，如果这有任何意义的话。当我尝试做一个旋转的立方体时，立方体的正面最终就像在屏幕前面一样。也就是说，您无法看到所有内容；这个太大了。就像立方体在屏幕平面上对齐一样。

我原以为演示中的立方体会有 z 变换，但我找不到。

Answer 1

在示例中查看父元素 experiment。它有一个 css 属性 perspective 设置为 800px。这就像影响所有 child 的相机到场景的距离。视野是自动计算的，因此 z 位置 0 上的元素始终具有原始大小。

因此，如果您将元素沿正 z 方向移动超过 800 像素，它将位于相机后面。在示例中，立方体的正面仅移动了 200 像素。