

Google's HTML/CSS 3D Buckyball - zbanks
http://www.google.com/webhp?hl=en

======
zbanks
Interestingly enough, they did it with "pure" HTML/CSS, plus 2 images for the
nodes & connections.

I was a bit surprised that they didn't use canvas, which seems to be all the
rage these days. I'm assuming this implementation, however, works on IE.

~~~
arnorhs
They did use HTML/CSS for display/rendering of the buckyball, but they also
_did_ use Javascript for animation and interaction.

Just to be clear.

~~~
zbanks
Yes, sorry.

I meant that they refrained from using canvas/svg/flash.

------
noonespecial
It should come with a warning that its gonna peg a cpu on my macbook with
firefox. Google is my homepage. I don't expect to lose half my battery by
opening firefox and stepping away for 20 minutes.

~~~
jackowayed
I'm a little surprised by that since it's just HTML and CSS. And mac chrome's
having no problems; my fan's not even spinning.

~~~
wlievens
> since it's just HTML and CSS

I've tried gadgets like this many times (though nothing as cool as that
buckyball) and it's been my experience every time. It's slow _because_ it's
just HTML and CSS.

~~~
patrickaljord
Very fast here, chrome on ubuntu.

~~~
wlievens
True, but Chrome is the exception, with it's awesome JS JIT.

------
krisokot
Can anyone explain how they made it? I am not that good at HTML or CSS.

~~~
jjcm
Emulated 3D - similar to how oldschool NES/SNES games did "3D" games. Each
sprite is simply scaled down to make it appear further away. Transforms are
used as well for the rotation of the node joints. The hardest part of all this
is probably just the z-order business (the z-axis stacking).

~~~
ashearer
To expand on how the joints rotate: the CSS styles use a translation of a
large CSS sprite image, which consists of 90 stacked images of the joint at
various stages of rotation over 180 degrees. Even older browsers that only
support translation transforms will work just as well. (Angles must be rounded
to the nearest 2 degrees, which would explain some jumpiness.)

------
cesare
HTML/CSS + JavaScript.

------
mgedmin
No permalink?

