Render 3D Worlds Using CSS and the DOM

Share this article

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.

Diagonal Lines

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.

It’s taken five and a half years, but our own James Edwards (co-author of ‘The JavaScript Anthology’) has actually come up with a practical application of the technique. Using nothing more than Tantek’s idea, some JavaScript and some serious math noodling, James has constructed a working dynamic 3D rendering engine. The engine takes simple 2D plans and turns them into a shaded 3D world that the user can freely navigate through. Amazing stuff.

Brothercake's CSS powered 3D Rendering Engine

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.

Alex WalkerAlex Walker
View Author

Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Co-author of The Principles of Beautiful Web Design. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 60+ of SitePoint's book covers.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week