Skip to content

Isometric office

Loading experiment…

My home office in an isometric 3D style, built from plain HTML elements and CSS 3D transforms. Play with the options and raise the desk.

How it works

No canvas and no WebGL: the room is a few hundred plain div elements placed in 3D with the CSS transform property. The floor is turned 45° and tilted by 54.74°, the angle of a true isometric view. Each box is three planes, because from a fixed corner the other three are never seen. Light and shadow are painted: every face gets its own shade, and the night is a colour mixed into all of them.