CSS3 transform: rotate() and rotateY() not working together

Question

I have a simple div that I want to rotate it -35 degree first and then let it spin around the y-axis.

However by using transform: rotate(-35deg) rotateY(180deg);, what I really got this like this:

The y-axis rotates with the div, makes my attempt fail.

So the question is, is there a way to reset the angle of the y-axis (probably using additional parent element and transform-origin?) after I rotate the element, to get the result I wanted?

Answer 1

Yes, although it will require using a container div. Consider putting a div within a div:

<div class="outer">
  <div class="inner"></div>
</div>

then apply your Z transform (the first one) to the inner div:

.inner{
   transformZ(Ndeg);
}

and your Y transform to the container div, whose Y axis as not been transformed by the Z rotation

.outer {
   transformY(Ndeg);
}

Why this is necessary is complicated and is probably beyond the scope of this answer, but suffice it to say that the history of 3d programming and drawing leads programmers to expect the behavior you see here... that way multiple successive transforms can have predictable, uniform results. If browsers were not rectilinear with respect to DOM elements, or if you had drawn a romboid shape (a kite or the like) using SVG, you could rotate it as you desire, with a transformation orientation going from one corner to the other.

Answer 2

The order of the transforms is the opposite of what seems intuitive. Explaining why is a little too long , but try this:

.test {
    position: absolute;
    width: 100px;
    height: 200px;
    left: 50px;
    top: 100px;
    background-color: lightblue;
    -webkit-animation: rotate 3s infinite linear;
    animation: rotate 3s infinite linear;
}

@-webkit-keyframes  rotate {
    0% { -webkit-transform: rotateY(0deg) rotate(-35deg)}
  100% { -webkit-transform: rotateY(360deg) rotate(-35deg)}
}

@keyframes  rotate {
    0% { transform: rotateY(0deg) rotate(-35deg)}
  100% { transform: rotateY(360deg) rotate(-35deg)}
}

I rotate -35 deg and then rotateY, animating it from 0 to 360 (read the transform from right to left).

demo