Interactive 3D Dodecahedron in HTML5


HTML5 is the future of the web, although it is taking some time before all browsers have full support for it. The things that can be done with it are nothing short of amazing, especially considering how easy the code really is. Well John Esposito over at the HTMLZone (part of DZone) has written a very good HTML5 example. The example is of an interactive 3D dodecahedron. The post gives a brief overview of the code as will as all of the code that was used to create the effect.

Below is an excerpt from the post.

Thursday's CSS3 bitmaps were clever and fun, but a little counter-HTML5-cultural: the whole point of SVG, Canvas, and so forth, is that vectors are better, because simpler, than bitmaps.

Today's interactive geometric CSS3 shape is just the opposite: far more pixels than pre-rendering could possibly justify, emphatically composed of 2D surfaces, and fully animated in 3D.

It's a folding/unfolding dodecahedron (not in FF/IE):

You can read the full post here.

You can checkout the demo here.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.