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

152 Chapter 13

E {

transform: rotateX(angle);

transform: rotateY(angle);

transform: rotateZ(angle);

}

Like the rotate() function, each of the functions accepts a single angle

value (negative values are permitted). I use the deg (degrees) unit in my

examples and demonstrate how each of these works by showing the same

degree of rotation around each axis using the following code:

 .trans-x { transform: rotateX(45deg); }

 .trans-y { transform: rotateY(45deg); }

 .trans-z { transform: rotateZ(45deg); }

You can see the results in Figure 13-2. The first example () shows an

element rotated around the x-axis. To understand what’s happening here,

imagine a line running horizontally across the center of the element; the

half of the element above the line is inclined 45 degrees away from you,

and the half below the line is inclined 45 degrees toward you. The next

example () applies the rotation on the y-axis. Imagine a vertical line run-

ning down the center of the box; the half of the element to the left of the

line is inclined 45 degrees toward you and the half on the right, 45 degrees

away. The final example () shows the same rotation again, but this time

around the z-axis, which has the same effect as the two-dimensional rotate()

function.

Figure 13-2: A rotation of 45 degrees around each of the three axes

If you want to rotate an element around more than one axis, you can

apply multiple functions to an element:

E { transform: rotateX(angle) rotateY(angle) rotateZ(angle); }

Another new function—rotate3d()—also allows you to rotate an ele-

ment around multiple axes; however, it’s not a shorthand function. Here’s

the syntax:

E { transform: rotate3d(x,y,z,angle); }