为什么对转换元素的观点会出现倒退？

Question

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

transform:rotateZ(180deg);

它看起来很正确,但我不明白为什么它首先看起来不正确.

在此输入图像描述

更新

如果你看看这个3D立方体就有意义了.立方体的变换原点是立方体的中间.

Answer 1

等距

据我所知，这些方法按预期工作，只是它们以等距 3D 方式旋转，即没有透视。这将使您最近的边缘和较远的边缘具有相同的大小，这与真正的 3D 不同，在真正的 3D 中，较远的边缘看起来较小，而较近的边缘看起来较大。

要深入了解等角投影，请阅读维基百科文章。

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