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

【问题标题】：How to rotate a parent element to display rotated child elements in 3D space如何旋转父元素以在 3D 空间中显示旋转的子元素
【发布时间】：2014-06-16 13:24:13
【问题描述】：

我正在创建一个应用程序，允许开发人员通过数据属性在 2D 和 3D 空间中旋转元素。下面将 step 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 - 显示应用程序在 X 轴上旋转应用于第 2 步。

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

有人可以帮忙解决所涉及的数学问题吗？

【问题讨论】：

标签： css 3d rotation transform css-transforms

【解决方案1】：

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

在演示 2 中，您应该在 X 之前旋转 Y：

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

【讨论】：

谢谢，解决方案确实是反转所有的变换：-webkit-transform: rotateZ(0deg) rotateY(-90deg) rotateX(-90deg);