By Alex Walker

Render 3D Worlds Using CSS and the DOM

By Alex Walker

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.

  • frankzzsword

    wow, totally cool

  • mcreal

    Amazing. Maybe in the near future the ability to make 3D games in this fashion would replace the need for Flash. It would be lighter to load and no need for plugins. Particulary when SVG is standard and well used.

  • wow, that’s amazing. A little worrying though — what if a future client sees this and asks for one? That’s not a route I want to go down…. ;)

  • Jason Batten

    Cool =)

  • I was looking at something very similar to this not long ago. JS shoot-em-ups.

  • Anonymous

    yawn. wake me up when it can do any of this
    lol at mcreal, there’s always a anti-flash troll that wants to do everything flash did years ago but can’t allow himself to accept its superiority in these type of applications it cos the slashdot collective mindset tells him not to.

  • I’ve seen a platform game totally coded with js, very cool.

  • Simon Proctor

    Well about 6 months ago I cam up with Doing graphs withs CSS and javascript worked quite well.

  • malikyte

    Honestly, I would have to imagine that Flash would actually load quicker than the huge amount of scary CSS and (X)HTML (and JavaScript) would in this instance — if we’re talking about making them look exactly the same…mostly because SWF are, I suppose, some sort of compilation as opposed to run-time rendering in the form of text. Obviously there are always dependencies that can differ tests in this instance, but as a proof of concept I think this is pretty cool!

  • While this is an incredibly interesting use of JavaScript and CSS, it certainly falls into the realm of “just because you can, doesn’t mean you should.” :)

  • Adam A Flynn

    Do I dare test it in IE? ;)

  • @Anonymous. Got nothing wrong with flash. I just enjoy seeing things do what they weren’t intended to do. ;)

  • @Adam, I haven’t tested it in IE, but it relies on the browser being able to render transparent borders, which IE can’t.

    This is, as I said, an experiment, and the nature of experimentation is you often can’t possibly see the final commercial application of what you’re playing with until you’ve done it. 3M were trying to invent superglue when they came up with a glue so crappy it wasn’t able to bond two pieces of paper together — hello post-it notes!

    Flash would be obviously still be the way to build this kind of app in 2006, but who knows how this might feed into future layout techniques or dynamic SVG or who-knows what else.

    @Simon Proctor – Nice work on the graphs! I’m interested to know. Did it take a lot of tweaking to get the lines to line up, or would it be relatively trivial to change the graph data and alter the graph?

  • Scimon

    It was a while ago when I wrote it but the idea is it takes any list where each item has been split into a name value pair using spans and draws the graph. All the code is on the page so you can download it, change the numbers and it draws the new graph.

    I have the horrible tendancy to play about with an idea for a while and then get bored, never document it and go off and do something else.

    (Simon “I’ve just joined the forums” Proctor)

  • Hey Simon. Very cool. I’d been considering doing the same sort of thing with bar graphs, but line graphs in a whole new level. Nice.

  • Pingback: Daniel's Weblog()

  • Be cuter if it worked in realtime and ‘turned’ corners – like the one I’ve been playing with for a few months now…

    Which I’ve been playing with the idea of replacing the building ‘image’ with SVG.

  • Alex

    hello, that was all cool. I was just wandering though if any of you can help me. I hope this will be right place to ask. I am looking for a quick and easy way to fix a onmauseover effect on the main tab button of my site. It works in FF but not in IE. Thanks in advance!

  • hello, that was all cool. I was just wandering though if any of you can help me. I hope this will be right place to ask. I am looking for a quick and easy way to fix a onmauseover effect on the main tab button of my site. It works in FF but not in IE. Thanks in advance!

    Not really anything to do with this post. Try the css forums —

    (But I will say this: you can’t wrap a link around list tags like you’ve done — i.e. <a><li>example</li></a>)

Get the latest in JavaScript, once a week, for free.