Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Interactive 3D Dodecahedron in CSS3

DZone's Guide to

Interactive 3D Dodecahedron in CSS3

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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

On to the code:

Because it's a simple shape, the div-organization is too plain to be interesting. 

The CSS is more satisfying -- with each side-pentagon transformed around x, y, and z axes, as dodecahedronity requires:

#dodecahedron.closed #group5 {
	-webkit-transform: rotateZ(-324deg) rotateX(63deg);
	-moz-transform: rotateZ(-324deg) rotateX(63deg);
	transform: rotateZ(-324deg) rotateX(63deg);
}

and each pentagon defined with gratuitously pleasing transparency:

.p2 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 0;
    height: 0;
    border-bottom: 59px solid #ff0000;
    border-left: 81px solid transparent;
    border-right: 81px solid transparent;
}

The JavaScript is what you might guess after a few seconds' interaction -- but is written efficiently and clearly enough to merit a look.

Worth checking out, as an excellent, direct instantiation of several cool CSS3 elements.

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}