A CSS Octahedron

I recently ran into the idea of styling single divs to get interesting effects, with the win that you can then just apply a single css class to a single html element to create re-usable shapes, icons, animations, etc. An impressive set of examples of this technique can be found here.

I immediately wanted to try it myself, and naturally started off with a subject that I am rather fond of – polyhedra. I wrote a css class that when applied to a div gives you an octahedron that rotates on hover (with appropriate lighting effects) without any Javascript.

Check out the JSFiddle here: http://jsfiddle.net/wtMrH/11/

Leave a Reply

Your email address will not be published. Required fields are marked *

nine × 1 =