等距

Question

我有一个你可以玩的小提琴here。在rotateX和rotateY滑块周围移动以查看。最接近你的元素部分较小，而较远的部分较大。如果你使用

翻转它

transform:rotateZ(180deg);

看起来不对，但我不明白为什么它一开始看起来不正确。

enter image description here

更新

如果你看一下this 3d cube就有意义了。 立方体的变换原点是立方体的中间。

Answer 1

据我所知，这些方法可以正常工作，只是它们在等距3D中旋转，即没有透视。这将使您的最近和更远的边缘具有相同的尺寸，不同于真实的3D，其中更远的边缘看起来更小而近边缘看起来更大。

要深入了解等轴测投影，请wikipedia article阅读。

视角

如果要获得旋转的透视图，必须将perspective属性添加到CSS中以包含元素。如果您在第一个小提琴中添加-webkit-perspective: 1000px;到<body>并在Chrome中查看结果，您将获得您可能想要的透视3D。

有关该属性的更多信息，请参阅CSS3 transform spec。