css - 如何旋转父元素以在 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>

一次显示一个步骤。应用程序将旋转 Canvas 以显示每个步骤。为此，我进行了每个步骤的旋转并反转它们，因此当导航到第 2 步时， Canvas 将提供以下内容:

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

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

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

演示 2:http://jsbin.com/rices/2/edit - 在第 2 步同时应用 X 和 Y，但如您所见，它错误地旋转了 Canvas 。

任何人都可以协助解决所涉及的数学问题吗？

Answer 1

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

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

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