Toy Story iAd Navigation

A re-creation of Apple’s demo iAd for Toy Story 3. Makes for a pretty good introduction to 3D transformations.

Snow Stack

A classy photo-gallery demo. As with all CSS 3D examples, this requires a recent build of Safari. Chrome doesn’t currently support 3D transformations.

(Submitted by Charles Ying)

3D CSS WordPress theme

Not a terribly practical demo, but pretty involved nevertheless.

Flickr 3D

An neat-looking combination of the standard WebKit “ring” demo and HTML5 local database functionality.

guillee:

Here’s another thing I made while messing with WebKit’s CSS 3D transforms, transitions, and animations, based on their morphing power cubes demo.

The clock’s “wheels” are turned with JavaScript, but they’re built and animated entirely with CSS. Like the CSS Star Wars demo, for now this only works in Snow Leopard with Safari 4 or the WebKit nightly, and, surprisingly, on the iPhone. Try it here: CSS clock. I also made a CSS timer that works entirely without JavaScript, using only CSS animations.

guillee:

I’m done: Star Wars opening crawl, using only HTML & CSS. Caveats: It only works in Snow Leopard in Safari 4.0.4 and the WebKit nightly. Nothing else supports the CSS 3D transforms and animations I used, but I just wanted to see if it could be done.

(Here’s a video of it on YouTube, in case I run out of bandwidth for the day and it stops working.)

guillee:

I’m done: Star Wars opening crawl, using only HTML & CSS. Caveats: It only works in Snow Leopard in Safari 4.0.4 and the WebKit nightly. Nothing else supports the CSS 3D transforms and animations I used, but I just wanted to see if it could be done.

(Here’s a video of it on YouTube, in case I run out of bandwidth for the day and it stops working.)

Panic’s website for Transmit 4, with CSS animations, 3D transformations, and more.

Panic’s website for Transmit 4, with CSS animations, 3D transformations, and more.

Quite impressive transformations of live video using Canvas. Notes that you can transform video in 3D space much easier using -webkit-transform.

Quite impressive transformations of live video using Canvas. Notes that you can transform video in 3D space much easier using -webkit-transform.

5/19/2010   #canvas #demo #video #3d