html - 为什么变换元素的透视图出现倒退？

Question

我这里有一个小提琴你可以玩。移动 rotateX 和 rotateY 滑块以查看。元素中离你最近的部分较小，而离你较远的部分则较大。如果你翻转它使用

transform:rotateZ(180deg);

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

在此处输入图像描述

更新

如果你看一下这个 3d 立方体，它是有道理的。立方体的变换原点是立方体的中间。

score 3 · Accepted Answer

等距

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

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

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

有关该属性的更多信息可以在CSS3 转换规范中找到。