CSS3 Foundations

chapter thirteen

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.

perspective

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 ...