Question

I’ve got a div that I would like to rotate about its y-axis (with perspective) then do another 3d rotation on it around a different origin and display the result. Is this possible? I’ve only been able to get transformation-origin working outside of a -transformation statement, so defining a new transformation just overrides the first one.

I’ve also tried nesting divs and doing one transformation on an inner div and doing another on an outer div, but the result is just the projection of the first transformation on to the plane of the second, it does not exists on its own plane, so looks completely wrong on the screen.

As far as I’m aware I can’t use canvas with javascript, because those transformations don’t have perspective.

This is sort of what I am trying to do:

-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);

Any ideas on how I can see the result of both of these transformations?

Answer 1

I think I’ve found the answer, use

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

in a wrapper div.

Thanks to this question, and as shown here and explained here (from the answers to that question).