Можно ли применить два преобразования с различным происхождением к одному div?

Question

У меня есть элемент div, который я хотел бы повернуть вокруг своей оси y (с перспективой), а затем сделать еще один 3d-поворот вокруг него вокруг другого источника и отобразить результат. Это возможно? Я смог заставить работать только источник-преобразование вне оператора -transformation, поэтому определение нового преобразования просто переопределяет первое.

Я также пытался вложить div и выполнить одно преобразование на внутреннем div и сделать другое на внешнем div, но в результате мы просто проецируем первое преобразование на план второго, оно не существует его собственная плоскость, поэтому на экране выглядит совершенно не так.

Насколько я знаю, я не могу использовать canvas с javascript, потому что эти преобразования не имеют перспективы.

Это то, что я пытаюсь сделать:

-webkit-transform-origin: 0px 0px;
-webkit-transform: perspective(1000px) rotateY(-90deg);
-webkit-transform-origin: 200px 200px;
-webkit-transform: perspective(1000px) rotateX(x deg) rotateZ(z deg);

Любые идеи о том, как я могу увидеть результат обоих этих преобразований?

Answer 1

Решение, которое не предполагает наличия обертки, состоит в том, чтобы связать два преобразования с translate3d между ними. Любое преобразование преобразования перемещает transform-origin для всех последующих преобразований - translateX(tx) перемещает его на tx вдоль оси x, translateY(ty) перемещает его на ty вдоль оси y, translateZ(tz) перемещает его на tz вдоль оси z и translate3d(tx, ty, tz) перемещает его на tx вдоль оси x, на ty вдоль оси y и на tz вдоль оси z.

Итак, ваш transform станет:

transform: perspective(1000px) rotateY(-90deg) 
           translate3d(200px, 200px, 0) 
           perspective(1000px) rotateX(x deg) rotateZ(z deg); 

Answer 2

Я думаю, что нашел ответ, используйте

-webkit-transform-style: preserve-3d;

в обертке div.

Благодаря этому вопросу, и как показано здесь и объяснено здесь (из ответов на этот вопрос).