HTML and CSS Reference
Going Beyond with 3D Transforms
IN THE PRECEDING chapter, you used the transform property to create 2D visual effects, but you can also use
it for 3D effects. As with the 2D effects, the 3D effects are great for adding visual flair to a site, especially when used
in conjunction with the transitions and animations covered in the next chapter.
At the time of writing, Internet Explorer 10 and Firefox 16 do not require vendor prefixes for properties relating to 3D
transforms. Like 2D transforms though, for the safest possible implementation, use vendor prefixed properties fol-
lowed by the official unprefixed property.
In this chapter, you make the Cool Shoes & Socks sidebar rotate in a 3D space.
Project files update (ch13-00): If you haven't followed the previous instructions and are comfortable working from
here onward or would like to reference the project files up to this point, you can download them from
Initial value: none | Inherited: No | Applies to: All elements with a display declaration relating to block, inline or
table | CSS3
Unprefixed browser support: IE 10+, Firefox 16+
Prefixed browser support: Firefox 10+, Chrome 12+, Safari 4+
Before you can begin making elements 3D, you need to create a 3D space using the perspective property.
1. In styles.css, find the #main rule set and add the following declaration:
2. Save styles.css.
This declaration doesn't create any visual effect on the page; it just tells the browser to make the main content contain-
er <div id=”main” class=”group”> 3D.
Think of the perspective as being how far the viewer is from an object.
Figure 13-1 shows that if perspective is 50px and an element is moved toward the viewer by 25px, the element
is 50% closer to the viewer. If perspective is 500px and the element is again moved toward the viewer by 25px,