问Y平面是如何看起来移动得更远的？
EN

Stack Overflow用户

提问于 2014-07-07 08:26:01

回答 1查看 26关注 0票数 0

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

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

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

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

我不能理解的是，如果这有什么意义的话，那就是魔方是如何在屏幕上“旋转得更远”的。当我试着做一个旋转的立方体时，立方体的正面就像在屏幕前面一样。也就是说，你不能看到它的全部；它太大了。这就像立方体在屏幕的平面上对齐一样。

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

发布于 2014-07-08 18:49:30

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

因此，如果你在正z方向上移动一个超过800px的元素，它就会在相机后面。在这个例子中，立方体的正面只移动了200px。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24601586

复制

相似问题

问Y平面是如何看起来移动得更远的？EN