如何旋转父元素以在3D空间中显示旋转的子元素

Question

我正在创建一个应用程序，允许开发人员通过数据属性在2D和3D空间中旋转元素。以下将步骤2在X轴上旋转90度：

<div id="container">
  <div id="canvas">
    <div class="step">
      Step 1
    </div>
    <div class="step" data-rotate-x="90">
      Step 2
    </div>
  </div>
</div>

一次显示一步。应用程序将旋转画布以显示每个步骤。为此，我正在进行每一步的旋转并将它们反转，因此当导航到第2步时，画布将给出以下内容：

<div id="canvas" style="transform: rotateX(-90deg);">

我遇到的问题是在对一个步骤应用多个旋转时计算必要的旋转。

演示1 ：http://jsbin.com/zafek/1/edit - 显示应用于步骤2的X轴旋转的应用程序。

演示2 ：http://jsbin.com/rices/2/edit - 在步骤2中同时应用X和Y，但正如您将看到的，它会错误地旋转画布。

有人可以协助数学吗？

Answer 1

旋转的顺序很重要，因为每次旋转都会改变下一次旋转的轴。

在演示2中，看起来你应该在X之前旋转Y：

-webkit-transform: rotateY(-90deg) rotateX(-90deg) rotateZ(0deg);