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 followed 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 www.wiley.com/go/treehouse/css3foundations.
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
1. In styles.css, find the
#main rule set and add the following ...