Is it possible to apply two transformations with different origins to one div?

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

A solution that does not involve having a wrapper is to chain the two transforms with a translate3d between them. Any translate transform moves the transform-origin for all subsequent transforms - translateX(tx) moves it by tx along the x axis, translateY(ty) moves it by ty along the y axis, translateZ(tz) moves it by tz along the z axis and translate3d(tx, ty, tz) moves it by tx along the x axis, by ty along the y axis and by tz along the z axis.

So your transform would become:

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