Как повернуть родительский элемент для отображения повернутых дочерних элементов в 3D-пространстве

Question

Я создаю приложение, которое позволяет разработчику поворачивать элементы в 2D и 3D-пространстве с помощью атрибутов данных. Следующий шаг поворачивается на шаг 2 на 90 градусов по оси X:

<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 - применяется как Х и Y на шаге 2, но, как вы увидите, что он неправильно вращает холст.

Может ли кто-нибудь помочь с вовлеченной математикой, пожалуйста?

Answer 1

Порядок вращения важен, поскольку каждое вращение изменяет оси для следующего вращения.

В демо-2, похоже, вы должны вращаться Y перед тем X:

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