Render 3D Worlds Using CSS and the DOM
Cast your mind back through to mists of time to January 2001 — reality TV is hip and fresh, ‘Dubya’ is unpacking boxes in the Oval Office and Tantek Celik — he of box model hack fame — first introduces the idea of using the interaction of CSS borders to create diagonal lines without the need for graphics . His ‘A Study of Regular Polygons’ demonstrated that by varying the thickness of CSS borders properties it was possible to create simple geometric shapes.
I clearly remember being quite gobsmacked by this idea at the time, but it also seemed a bit too obscure to be truly useful in everyday web development. Admittedly, a few developers managed to tease logos (Kevin did the SitePoint logo in a Tech Times edition) and simple diagrams out of a brittle tangle of DIVs, but in general it was all more about bloodymindedness than utility.
I should make it clear that, like Tantek’s original demo, at this stage it is an exploration of what’s possible, rather than a viable application. You would expect this kind application would fall into dynamic SVG in the near future.
Still, with fond memories of Wolfenstein 3D flooding back, I have to admit the idea of one day stalking my way through a Nazi stronghold built of CSS bricks has a certain appeal.