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

Get the senior executive’s handbook of important trends, tips, and strategies to compete and win in the digital economy.

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.

Read this guide to learn everything you need to know about RPA, and how it can help you manage and automate your processes.

Topics:

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}