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

Never build auth again! Okta makes it simple to implement authentication, authorization, MFA and more in minutes. Try the free developer API today! 

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.

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}