Now that modern browsers are stepping up with better support for CSS 3, web designers have even more powerful transforms to play with. Page elements can be animated, rotated or otherwise transformed in ways that previously weren't possible, or at least required complex JavaScript.
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.
The other possibility would be to include some JavaScript for less-capable browsers, but that defeats much of the purpose of CSS 3 -- making complex transforms quick and simple.
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.
See Also:
