Pro CSS3 Animation

Chapter 9 ■ CSS3 3D tranSformS, tranSitionS, anD animationS

As you can see, proper placement of both perspective and perspective-origin, both in the code and the
Cartesian space of your web page, can make a significant difference to how your content is displayed.

Rotation

Now that you’ve done a little rotation in 3D, you should take a moment to explore it completely. 2D Transforms
has only one rotation; not surprisingly, 3D has three. What can be confusing is the orientation and effect of those
three axes, shown in Figure 9-5.

Figure 9-4. Correct orientation of images with corrected body height