The Back Button

HTML5: 60 Spinning 3D Cubes in Space

After my co-worker, Charles Ying, posted his 3D CSS Snow Stack demo online a couple of weeks ago, I felt compelled to give 3D CSS in HTML5 a try myself.

Now, I haven't created anything as complete at Charles's demo. Instead I took the approach of seeing how much "stuff" I could get moving at once. I started with one cube spinning on its own, and then I just kept adding. I rested on 60, it seemed like a good amount of cubes; it will result in 360 images from Flickr being 3D transformed at once.

To run the demo, you will need to be using Mac OS X Leopard and running the latest WebKit nightly.

DEMO: Flick Cubes

Screenshot:

PJ Doland via the old blog says ... Cool.

Kind of reminds me of the Phantom Zone from Superman II.

Ms2ger via the old blog says ... I might have missed something, but I don't see *any* HTML5 in this demo. (You don't even use the HTML5 doctype!)

Alex Bustin via the old blog says ... @Ms2ger oh boo hiss ... the op must be such a dumb ass!

So you have no comment about the 3d transforms .. you're just complaining about doctype? You're certainly enlightening.

Mark Deepwell via the old blog says ... Nice demo!

It works well in WebKit on my old MacBook. Now how do we make IE, Firefox, and Opera all support CSS Transforms?

That is the real challenge.

ossFanatic via this site says ... It works well in Arora - a KDE Webkit Browser. Unfortunately framerate drops, while more images are nbeing created. Great demo!

Coda via this site says ... Ha! Screw you! I'm running Linux with Chromium!

No Body via this site says ... Using... Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 ( .NET CLR 3.5.30729) Windows Vista Result = nothing

Lalla via this site says ... It lags on the iPhone 3gs and the phone becomes really hot. Sorry man.

G-Man via this site says ... Looks good on iPad.