Pure CSS 3D Solids – Ana Tudor / Front-Trends 2014

– Now that's cool! Haven't experimented with WebGL really yet!
– Actually, that's pure CSS.

The above is from an actual conversation I recently had. WebGL is great, but really cool 3D can also be created using nothing but HTML and CSS.

How? Well, obviously using CSS 3D transforms. Chaining them and applying them on nested elements allows us to create more than the basic cube example everyone is probably familiar with by now. We can recreate regular polyhedra as well as Archimedean, Catalan or Johnson solids.

We can also make these 3D shapes transform into others, either by breaking them into smaller ones which then recombine into something else or by making their simple polygonal faces morph into more complex ones. We can even use CSS gradients for shading.

Best thing about this? Preprocessors introduce logic and computation in CSS, keeping these demos extremely customizable while writing little code and all the Maths reduces to a right triangle and a simple equality: x = y/z.