Chapter 9 ■ CSS3 3D tranSformS, tranSitionS, anD animationS
As you can see, rotateX is effectively the same as 2D CSS rotation, and moves around the axis like a
windmill. rotateY swings the element from side-to-side like a door, and rotateZ moves around a horizontal axis,
like a cat door. Naturally, the visual effect of these transformations will differ as the perspective-origin
is altered.
If the element is rotated around more than one axis at a time, it’s usually more effective to use the
rotate3d shortcut:
img { transform: rotate3d( 0, 1, 0, 45deg); }
You can think of rotate3d as a matrix multiplier for each of the axes (x, y, z): if any of the first three slots
has any kind of numerical value, the element will be rotated by the last value around the appropriate axes. For
example, the above declaration will rotate an image by 45 degrees around the y axis. You can combine multiple
rotations by turning on bits for multiple axes:
img { transform: rotate3d( 1, 1, 0, .15turn); }
Translate
3D transformed elements can also be moved along the X, Y, and Z axes. Note that doing so will move the element
toward or further away from its vanishing point if the element is rotated around the X or Y axes or moved along
the Z axis. For example, the code in Listing 9-4 can create the visual effect of an opening crawl for a movie with
the credits disappearing into infinite space.
Listing 9-4. Code, Content, and CSS for an Opening Credit Crawl