3D animations coming to Safari
Charles Ying over at satine.org has put together an impressive demo using Safari's forthcoming CSS 3D transform features. There is a YouTube video of the demo (you can watch it in the 2nd half of this post), as a nightly build of WebKit or the Snow Leopard version of Safari is required to render it.
The demo, titled Snow Stack, displays a wall of photos in three dimensions and allows you to navigate across the wall using your arrow keys. The wall of photos seems to go on into infinity while it dynamically loads the photos from Flickr as you travel across it.
The animation style is similar to the browser plug-in Cooliris (formerly known as PicLens), but it was written entirely in HTML and CSS, with some JavaScript to pull in the photos from Flickr. The animations are so amazingly smooth animations it's hard to believe that only CSS was used to create them. Surprisingly, Safari on iPhone has supported CSS 3D transforms for sometime now, but the animations have yet to make an official debut on the desktop.
If you are running Leopard and want to see the demo running on your Mac you will need to download the nightly build of WebKit to render it in all of its 3D splendor. If you have a pre-release copy of Snow Leopard installed you can simply use the built-in version of Safari to view it. Until Apple releases a public build of Safari with these features those are your only options.
A post today on the Surfin' Safari blog over at WebKit features another demo of CSS 3D transforms called Poster Circle. I've posted a video to YouTube of this demo in action.
Some of the options developers will be able to use with the new CSS 3D tranforms include: scaling, perspective, rotation, and standard 3D positioning. Apple has submitted a specification detailing these features to the W3C. Hopefully as time progresses other browser vendors will implement the spec as well. In the meantime Safari users will have these beauties all to themselves.
Here's the video of Snow Stack:
