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.
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.
Of course, browser support is still somewhat limited in “the real world,” so it’ll be some time before you can begin using them heavily in your daily work. But if you’d like to jumpstart your understanding of CSS 3, the 24 Ways blog has a nice tutorial on manipulating images using CSS 3′s transform properties.
The article tackles mainly WebKit-based transforms, though if you’re using nightly builds of Firefox 3.7, the -moz-transform code will work as well.
Obviously, Internet Explorer won’t be able to render any of these CSS rules, so you’ll want to make sure the effects degrade for browsers that don’t understand CSS 3. For example, the first demo in the tutorial simply rotates an image and applies a drop shadow. Browsers that don’t understand the CSS would simply display the image without the rotation or shadow — not ideal, but workable.
Another point worth mentioning is that the box-shadow rule has actually been dropped from the CSS 3 spec due to time constraints. Most likely it will be resurrected as drop-shadow, or something similar, but the change is still in the discussion stage so you might want to hold off using box-shadow for now.
Be sure to dig around the rest of the 24 Ways site, which is a bit like an advent calendar for web designers. We’ve featured 24 Ways tutorials in the past and, so far, this year’s offering look to be every bit as useful as those from years past.