Transform Your Site With CSS 3

Our friends at TypeKit, the custom web fonts service, have posted a nice CSS tutorial from web developer Andy Clarke. Clarke walks you through the basics of how to use CSS 3's new two-dimensional transform properties.

CSS transforms allow you to rotate images, create a mirror effect without adding extra images or add some scaling mouse events to your pages. With rules like scale()``rotate() and translate(), CSS 3 can do what was once only possible with JavaScript. The final result of Clarke's tutorial may be a bit too close to Apple's Coverflow visuals to just cut-and-paste, but the step-by-step walkthrough makes it simple to tweak the look to your liking.

In addition to the transform rules, the tutorial makes use of the oft-overlooked, but very powerful, nth-of-type(n) selector to avoid cluttering the markup with extraneous ids.

Best of all, thanks to widespread support in modern browsers and a little JavaScript help for older browsers, the example code in TypeKit's walkthrough works in just about every web browser. That said, perhaps the best advice in the tutorial is this gem:

No two browsers are the same, so to make the most from emerging technologies such as HTML5 and CSS3, we need to banish the notion that websites should look and be experienced exactly the same in every browser. We should design around browser differences instead of hacking around them.

See Also:

• Dealing With Browser Differences in CSS 3
• CSS3 Pie Lets You Have Your CSS and IE It, Too
• Target the Future With CSS 3’s :target Rule
• Simplify CSS 3 With Online Code Generators