150 Chapter 13
or on the main processor. The result is that 3D-transformed elements usu-
ally animate in a way that’s smoother and more performant than other
elements that are animated using only JavaScript. This being the case, you
can go ahead and use 3D transformations in your pages without too much
concern.3D Elements in CSS
Three-dimensional objects in CSS are based on the Cartesian coordinate sys-
tem, which is illustrated in Figure 13-1. You can read about it on Wikipedia
(http://en.wikipedia.org/wiki/Cartesian_coordinate_system/). I discussed the
two-dimensional version of this system in Chapter 6.Figure 13-1: The Cartesian coordinate system,
with the axes x, y, and z^1NOTE If you have experience using three-dimensional computer graphics programs, you
should be familiar with the calculations and terminology used in this chapter. If not,
don’t worry; I’ll do my best to explain it all as I go along.In CSS, the z-axis is based on the viewer: If you think of the x-axis
as left to right and the y-axis as up and down, then think of the z-axis as
toward and away. When you move an element along the z-axis by a positive
value, you move it toward yourself; likewise, moving it by a negative value
moves it away from you. You can change this somewhat by using different
perspectives, which I’ll explain in due course.
I must point out that, although I’ll talk a lot about 3D in this chapter,
I’m only referring to 3D coordinates. The elements themselves are still two-
dimensional; they only have height and width. They are moved around in
three-dimensional space, however, like moving a piece of paper around in
t he a ir.- This image is from Wikimedia Commons (http://commons.wikimedia.org/wiki/File:Coord
_system_CA_0.svg).