CSS 3D 变换角度问题

Question

我正在使用CSS3对div执行以下转换：'-webkit-transform' : 'rotateX(45deg) rotateZ(-45deg)'。结果如下图所示或这个fiddle中的一样。

正如我们在这里看到的那样，角度为36度，而不是30度（sin45 * sin45）。有人知道这个问题的原因吗？这是故意的还是CSS3的一个bug？

更新：我已经将参数设置为：-webkit-transform-style: preserve-3d; -webkit-perspective: none;，所以一切都应该以正交方式呈现。然而，角度仍然不是30度。

- Longbiao CHEN

---

你的计算假设了等距渲染模型。CSS 3D 使用透视 3D 渲染。 - Raymond Chen

谢谢 Raymond。有没有办法在iOS上使用WebKit启用CSS 3D的等距渲染？ - Longbiao CHEN

变换不是过渡 - 请不要混淆两者。我已经为您编辑了标签。 - BoltClock

@ArpitSrivastava 确定的。http://jsfiddle.net/kteSW/ - Longbiao CHEN

@FelixChan http://en.wikipedia.org/wiki/Euler_angles 这将帮助您理解为什么旋转角度为36度，因为您是在X Z方向旋转，所以整个角度会改变。 - Arpit Srivastava

Answer 1

我们想要实现的是计算从点（1,1,1）观察点（0,0,0）时眼睛与Z轴之间的夹角。

因此，实际上是 (90度) - arctan(1 / sqrt(2)) = 54.7356103度，而不是45度。

- Longbiao CHEN