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.