3D Rendering via CSS Borders

Posted at 12:00 am on January 1st, 2005

Filed in:

Introduction

The image above is in fact not an image file, but an arrangement of nested div tags, generated by a 3D rendering engine written in JavaScript.

(If you see a void instead of a picture of some cubes, it means you’re using a browser that doesn’t support transparent borders in CSS, which are essential to this demo. Two browsers that are known to render this page as intended are Firefox and Safari.)

Disclaimer: It is a “real” 3D program. You define polygons in 3D space, set a light source and camera parameters, and the program renders the scene. However, it is not a “good” 3D program. I don’t have any formal background in 3D, and I’m sort of hacking my way through this. It freaks out if there’s anything behind the camera, and the way it decides the order in which to layer the polygons is too simplistic to work with more complicated scenes. It’s also slow, because (a) I don’t know enough of the right math to figure out an efficient way of doing… well, anything, and (b) give it a break — it’s written in JavaScript.

I wrote it because I wanted to demonstrate that CSS could be used to draw arbitrary polygons, and “Polygons in CSS with JavaScript” doesn’t have that sensational ring to it. Mention 3D, though, and you’ve got people’s attention. So, now that I have it (your attention), if you’re interested in the polygon bit, read on.

Using CSS to Draw Arbitrary Polygons

I was inspired by Chris Hester’s CSS House Demo, which demonstrates that the CSS border property can give you a diagonal edge between colors. (And I’m a huge fan of elaborate demonstrations.)

So, with that knowledge, it becomes trivial to use borders to draw right triangles. For example, a div with these CSS attributes:

height: 0px; 
width: 0px;
border-right: 70px solid #f00; 
border-bottom: 50px solid transparent;
font-size: 0px;

…produces this:

From there, any polygon is possible: simply divide it up into smaller rectangles and right triangles that fit the above form. For example:

This polygon…

…is made up of these:


Note: This hack was never really useful to begin with, but the canvas element makes it even less useful than it already was.

The JavaScript

Up to this point I’ve only shown the CSS that the program generates. So here’s the code that generates it. The procedure for creating the scene shown at the beginning of this page is in the file cubeDemo.js. The functionality is provided by the other two files in the Files section below.

You can run the cube demo by clicking the button below. (It may take a few seconds, depending on the speed of your computer.)

When the demo is run, the image will go here.

Files

3 Responses

  1. Mahesh said:

    Hello Friend,

    Very nice idea, First time i have seen this type of use of DIV and CSS.

    well done
    keep it up.

    Mahesh

    February 26th, 2009 at 5:54 am
  2. Chosen said:

    I think its very neet that this is possible with just CSS and JavaScript, thanks for the heads up dude. This could be very usefull.

    Keep up the good work.

    Chosen

    March 11th, 2009 at 7:26 am
  3. Hello,

    You've obtained a nice rendering. I'm also trying to render 3D animations with javascript. You can have a look here :
    http://consume.free.fr/prog/js3d/

    Enjoy !

    July 13th, 2009 at 3:59 am

Leave a Comment

  • Formatting
    • No HTML. Any code you enter will display as that code.
    • If you are putting code in your reply in order to present the code itself, you can use these special HTML comments for formatting:
      Inline: <!--code-->...<!--/code-->
      Block: <!--pre-->...<!--/pre-->

© Thomas Peri