Saturday, October 3, 2015

Yet Another 3D Cube Demo in CSS!

So I came across Keith Clark's fantastic 3D work in CSS and immediately felt like a complete moron. I thought I knew my stuff, but haven't gotten into CSS transforms much - certainly not to the extent of the incomparable Mr. Clark! (You can do what HE does, you're a Mister!). But seeing his work inspired me to learn more about CSS3 transforms.

Welcome to Yet Another 3D Cube CSS Demo, which I affectionately refer to as YAC! But I wanted to put my own spin on this demo since most demos and tutorials I read had lots of text describing what they were doing, but no real visuals other than the final product. So once I got my cube working, I wanted to know how I could present this new-found knowledge to my Java web development class I teach at Interface Web School?

Animate the building of the cube, of course! By adding a CSS transition for each transform, you can watch the cube being built by those transforms. The YAC demo source code is fully commented, so check that out for full details on the transforms and how they work.