chapter twelve

Adding 2D Transforms

In this chapter, you leave behind older browsers and make use of one of CSS3’s most exciting features, transforms, which let you move, rotate, and scale elements, among other manipulations.


Project files update (ch12-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

Safely Using Experimental CSS3 Properties

css3_badge.psd  Because all the CSS features explained in this chapter are from the CSS3 specification, they are unsupported in Internet Explorer 6, 7, and 8. Likewise, 3D transforms, transitions, and animations described in Chapters 13 and 14 are also unsupported in these browsers, as well as Internet Explorer 9. They do however have good support in Internet Explorer 10 and other major browsers.

Although these CSS3 properties are “experimental” and a part of Working Draft modules, they have been implemented in modern browsers for some time, and are actually close to being safe enough to use without prefixes. At the time of writing though, these properties should be used with prefixes, so you’ll learn to do just that—the most future proof way to use the latest CSS3 features. ...

Get CSS3 Foundations now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.