I won’t lie, the math nearly broke me, but it was worth the effort because lighting brings an incredible sense of depth and atmosphere an otherwise flat and lifeless environment. Lighting was by the biggest challenge in this project. See the Pen 3D objects in CSS by Keith Clark ( on CodePen A 3D oil drum built using rectangular elements The following example shows this in practice – have a look at the “JS” tab: A tube is an assembly containing planes rotated around an axis and a barrel is a tube with a top plane and another for the bottom. Planes can be added to assemblies, (a wrapper element) allowing the entire object to be rotated and moved as a single entity.

The simplest object that can be created is a plane, which is basically a element. An example of 3D objects built entirely from rectangular elementsĪll objects are created in JavaScript using a small set functions for creating primitive geometry. In the image below you can see the barrel top and wheel objects appear rounded despite being made up of rectangles. In many ways this makes dealing with 3D easier as there’s no complex math to deal with - just apply a CSS transform to rotate an element around an axis and you’re done!Ĭreating objects from rectangles seems limiting at first but you can do a surprising amount with them, especially when you start playing with PNG alpha channels. Instead, we have to work with HTML elements, which are always rectangular and have two dimensional properties such as top, left, width and height to determine their position and size. We can’t define arbitrary shapes using a set of points. With CSS transforms this is turned on its head. The 3D engine will use this vertex data and some math to render 3D objects on your 2D screen. Each corner can be individually manipulated allowing the rectangle to be pulled into different shapes by moving its vertices along the x, y and z axis. A rectangle for example would be defined by four vertices, one for each corner.

The geometry of a 3D object is stored as a collection of points (or vertices), each having an x, y and z property that defines its position in 3D space. This post documents how I did it and the techniques I used. The demo was a technical showcase of what could be achieved with CSS at the time but I wanted to see how far I could push things, so over the past few months I’ve been working on a new version with more complex models, realistic lighting, shadows and collision detection.

Last year I created a demo showing how CSS 3D transforms could be used to create 3D environments.

Crows sourced 3d virtual world