CSS3 introduces some awesome 3D transforms that let you position, rotate, and scale your elements in 3D space. It's still in working draft status, and today it's only supported in Firefox and WebKit. IE has plans to support it in version 10.
Now, I'm a bit of a hobbyist when it comes to Flash and After Effects, and I've prototyped a few incomplete 3D games using DirectX. So I felt right at home with the CSS3 transform property. If you haven't worked with 3D transforms before, don't worry. I'll cover the details of it in a later post. For now, check out the demo.
The Demo
Instructions: Move your mouse cursor around, and watch the image below rotate to face it. Gotta use Firefox or WebKit. (Firefox 10+, Chrome 12+, or Safari 4+)
It looks really smooth to me in Chrome. When I pull it up in Firefox, it doesn't seem to be doing any antialiasing magic, so the edges are jagged. Here's the code, in case you're interested.
In a future post, I'll get into more of the nitty gritty details of the 3D transform options, so stay tuned!
No comments:
Post a Comment