ANIMATED EFFECTS USING CSS3 - Practical CSS3: Develop and Design - page 161

ROTATEX, ROTATEY, ROTATEZ
Moving on to 3D rotations, the rotateX , rotateY , and rotateZ properties are a bit
confusing at first, because they produce quite different results than what you might
expect. rotateX and rotateY rotate the element they are applied to around the X
and Y axes, respectively, which actually transforms them in the Z axis direction!
rotateZ rotates the element around the Z axis, which produces a similar effect to
the 2D rotation you saw in the earlier “rotate” section!
Let's look at an example to smooth out this confusion: Open the transform-
3drotate-x-y-z.html file in the chapter5 code download folder. In this file you'll
see three copies of an example with a 180 degree rotateX , rotateY , and rotateZ
applied to them, respectively. I've also applied a basic transition to each one; as
you hover over the example's #wrapper <div> , each <article> will animate, so
you can easily visualize the effects of these transforms. The rotation along the X
axis looks like this:
transform: rotateX(180deg);
The Y axis rotation looks like this:
transform: rotateY(180deg);
And the Z axis rotation looks like this:
transform: rotateZ(180deg);
I've not included images here, because it is much easier to see the full effects
of these examples by viewing the code example in your browser.