Skip to Content

3D animations coming to Safari

by Joshua Brickner Jul 17th 2009 at 10:00AM


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:



View Tags

Related Stories

Categories

Internet Developer Snow Leopard

Charles Ying over at satine.org has put together an impressive demo using Safari's forthcoming CSS 3D transform features. There is a...
 

Add a Comment

Sign in »
*0 / 3000 Character Maximum

25 Comments

Filter by:
drunknbass

this is not new.. this has been available to do and has source available for some time.

http://ajaxian.com/archives/css-vfx-css-visual-effects-tutorials-and-components

July 19 2009 at 10:04 PM Report abuse rate up rate down Reply
Brandon

This video reminds me of corolis on ie and firefox. Corolis doesn't support Safari, (I've tried) Could this be used in place of Corolis?

July 18 2009 at 3:16 AM Report abuse rate up rate down Reply
balls

I got the demo working on Webkit, and it's pretty fuggen slick.

Hopefully this gets pushed to the W3C and is made part of the CSS standard.

July 17 2009 at 7:06 PM Report abuse rate up rate down Reply
Neil Anderson

Totally rad!

July 17 2009 at 4:55 PM Report abuse rate up rate down Reply
Bobnease

Tools like this are phenomenal for companies and artists promoting galleries of products. I love looking through Photo galleries using Cooliris in FireFox, so having the ability to do this in Safari without a plugin is cool. I'd be interested to see how this evolves with multi-touch as it becomes more commonplace.

July 17 2009 at 1:02 PM Report abuse rate up rate down Reply
Andy

pretty sick ratatat soundtrack. oh and the 3d effect is cool too

July 17 2009 at 12:04 PM Report abuse rate up rate down Reply
Eric Carroll

I've been using CoolIris for a while now, that does something similar to this with correctly formatted pages, like FaceBook, Google images and Flickr. Very handy to be able to scroll through whole albums like this, very quickly... if you can't wait for this to be "standard" go check out CoolIris...

July 17 2009 at 11:52 AM Report abuse rate up rate down Reply
2 replies to Eric Carroll's comment
matthew

The point of this demo has nothing to do with what it actually does. It's how it was done. The developer chose the functionality as a sample proof of concept demo, but the point is that it was all done with HTML and CSS, and didn't require any plugins.

July 17 2009 at 11:57 AM Report abuse rate up rate down Reply
Eric Carroll

Point well taken, my post doesn't demonstrate I understood that. And although I do understand that, I was trying offer people a chance to play around with something similar (albeit plugin based and less elegant) and help them grasp the "practicality" of even this seemingly frivolous effect.

Thanks for illustrating the difference. Here's to hoping for subtle and useful (and not annoying ad based) implementation of this technology on all our browsers, iPhone included!

July 17 2009 at 12:05 PM Report abuse rate up rate down Reply
mrfine

What happens to Cool Iris, this can already be done now if you install the free plug in from cool iris?
http://www.cooliris.com

July 17 2009 at 11:50 AM Report abuse rate up rate down Reply
Paul

This looks like Cooliris, which is already available for Firefox.

July 17 2009 at 11:21 AM Report abuse rate up rate down Reply
2 replies to Paul's comment
coyo t

I was going to say the exact same thing. As for 3D effects, look no further than a good script library such as jquery.com

July 17 2009 at 11:33 AM Report abuse rate up rate down Reply
elean

This is totally different. They use only CSS for the animation. No JS involved for animation, only for getting the Pics. Thats no way the same as some jQuery animation (btw, what 3D animation do you talk about jQuery? Never came across one... 2D ok, but no 3d.) Now things are where they belong: HTML for structure / content, CSS for presentation (ie. animation) and JS for functionality...

Good new world!

July 18 2009 at 9:32 AM Report abuse rate up rate down Reply
cristiana

This stuff is great, but, until total IE usage (6, 7 and 8) drops into the single digits, or MS implements any of these cool new standards, most websites will not be able to use any of these cool features.

July 17 2009 at 11:07 AM Report abuse rate up rate down Reply
Buy an ad here

Hot Apps on TUAW

Tweets

© 2012 AOL Inc. All Rights Reserved.