【问题标题】：Why does perspective on transformed elements appear backwards?为什么变换元素的透视图出现倒退？
【发布时间】：2013-03-11 21:54:04
【问题描述】：

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

transform:rotateZ(180deg);

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

更新

如果您查看this 3d cube，这很有意义。 立方体的变换原点是立方体的中间。

【问题讨论】：

【解决方案1】：

等距

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

如需深入了解等距投影，请阅读wikipedia article。

视角

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

关于该属性的更多信息可以在CSS3 transform spec找到。

【讨论】：