Google's HTML/CSS 3D Buckyball | Hacker News Reader

Google's HTML/CSS 3D Buckyball

google.com

50 pointszbanks24 comments

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.

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.

Yes, sorry.

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

Are you telling me they didn't use JS? I know I should look at the source, but can't!

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.

It's very fast for me on Chrome for Windows but the fan kicked in as soon as I opened the page. Looking at the Chrome task manager it's using a huge proportion of the CPU compared to other tabs.

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.

> 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.

Very fast here, chrome on ubuntu.

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

This actually runs fine on my nexus one. Based on other comments here I'm rather impressed with the performance.

Try to upgrade to Chrome - that should solve the issue.

But yeah, it is a little waste full for something like googles home page.

happened to me too. I didn't notice it until I heard the fan blasting, and it took me a while to realize what was going on :P

who is downvoting this? It works flawlessly for me but for others this is a valid complaint.

Works beautiful on Fx b4

I actually had to restart my browser (FF3.6 Ubuntu).

What's a mackbook?

A typo. Fixed. Thanks.

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

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).

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.)