The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

3D Transformations 153

The angle value is straightforward, but the x, y, and z values are not

quite so simple. Each takes a number value, which is used to calculate

a direction vector (the full explanation of which is beyond the scope of

this book; visit http://mathworld.wolfram.com/CartesianCoordinates.html for

an overview of the topic). The origin of the vector is the point where all

the axes meet—by default, the center of the element—represented by the

values 0,0,0. A direction vector is a line in three-dimensional space, going

from the origin to the coordinates given by the x,y,z values provided to

the rotate3d() function. The element will be rotated around this line by the

amount specified in the angle value.

This subject is quite complex, so I’ll explain by showing a few simple

examples, once again with the same 45 degrees of rotation, using the fol-

lowing code:

 .trans-x { transform: rotate3d(1,1,0,45deg); }
 .trans-y { transform: rotate3d(1,0,1,45deg); }
 .trans-z { transform: rotate3d(0,10,10,45deg); }

You can see the output in Figure 13-3. The first (left) example () has

the values 1,1,0, meaning the imaginary line goes to a point 1px along the

x-axis and y-axis. (In fact, the “line” continues past that point in the same

direction; the values 10,10,0 or 1000,1000,0 would produce the same results.)

The element is rotated 45 degrees around that line. The second (middle)

example () has the values 1,0,1, creating a point 1px along the x-axis and

y-axis and rotating the element by 45 degrees around that line. The final

example (), shown on the right, has the values 0,10,10, so the element

rotates 15 degrees around a line between the origin and a point 10px along

the y-axis and z-axis. Remember that any two equal values would have the

same effect.

Figure 13-3: Rotation using directional vectors with the rotate3d function

You probably won’t use the rotate3d() function often when coding pure

CSS transformations as the calculations involved are quite complex. But

when combined with the mathematical processing capabilities of JavaScript,

the flexibility of this approach could really come into its own.