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.
What's a mackbook?
A typo. Fixed. Thanks.
Google's HTML/CSS 3D Buckyball
11–20 of 26 posts
Re: Google's HTML/CSS 3D Buckyball
#12Re: Google's HTML/CSS 3D Buckyball
#13Interestingly 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.
Are you telling me they didn't use JS? I know I should look at the source, but can't!
Re: Google's HTML/CSS 3D Buckyball
#14Can 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).
Re: Google's HTML/CSS 3D Buckyball
#15Interestingly 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.
Re: Google's HTML/CSS 3D Buckyball
#16It 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.
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
Re: Google's HTML/CSS 3D Buckyball
#17It 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.
Re: Google's HTML/CSS 3D Buckyball
#18Can 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.)
Re: Google's HTML/CSS 3D Buckyball
#19It 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.
who is downvoting this? It works flawlessly for me but for others this is a valid complaint.
Re: Google's HTML/CSS 3D Buckyball
#20It 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.
This actually runs fine on my nexus one. Based on other comments here I'm rather impressed with the performance.