Going Beyond with 3D Transforms - CSS3 Foundations - page 216

-webkit-transform: rotateX(10deg);
2. Save styles.css.
rotateX() rotates an element on the X axis. Rotated on a positive angle, the .sidebar is rotated away
from the viewer at the top and toward the viewer at the bottom, as shown in Figure 13-6; it kind of looks
like the Star Wars opening crawl text! A 180-degree rotation on the X axis would flip an element vertically.
Figure 13-6 The Cool Shoes & Socks page zoomed out to show the sidebar rotated on the X axis by 10 degrees.
Because the X axis rotation is unsuitable for the page, change it to a Y axis rotation instead.
3. In the .sidebar rule set, modify the transform declaration as follows:
-webkit-transform: rotateY(-40deg);
4. Save styles.css.
Rotating on the Y axis by a positive angle rotates an element's left side toward the viewer and right side away. The
opposite occurs when rotating by a negative angle, which is what you do by modifying the transform declaration,
as shown in Figure 13-7. A 180-degree rotation on the Y axis would flip an element horizontally.