Build a CSS cube from plain divs

Design tokens keep the whole team in step. We name colours by their role, such as face-top, face-left and face-right, rather than by hue. When we switched the site to a violet accent for a campaign, only the token values changed. Every illustration, button and chart followed without anyone opening a single component.

Why the order of rotations matters

Performance is rarely a problem for one hero cube, but a scene with fifty transformed blocks is a different story. Each block may become its own compositing layer, and every layer costs memory. Open the Layers panel before you ship and count them. If the number surprises you, flatten the static parts into a single SVG.

1. Draw the floor

   Create a wrapper with transform: rotateX(60deg) rotateZ(-45deg). This tilts the whole scene into isometric space.

2. Place a cube

   Add a square child and give it three faces with pseudo-elements. Each face gets one of the three shading colours.

3. Lift it on hover

   Translate the cube along its Z axis on hover and deepen the floor shadow at the same time.

The code

Readers often ask whether isometric art is still a trend or already a cliché. Our answer is that the style is a tool, like a chart type. It is excellent for explaining structure and relationships, and it is a poor choice for emotion or narrative. Used for the right job, it never really goes out of date.

.scene {	--unit: 2rem;	transform: rotateX(60deg) rotateZ(-45deg);	transform-style: preserve-3d;} .cube {	width: calc(var(--unit) * 3);	aspect-ratio: 1;	background: var(--face-top);}

<div class="scene" aria-hidden="true">	<div class="cube"></div></div>

.cube {	position: relative;	width: 6rem;	aspect-ratio: 1;	background: var(--face-top);}

Colours used

Lessons from the workshop

Browser support for 3D transforms is excellent today, with a few sharp edges. The main one is that certain properties, such as overflow hidden or some filters, quietly flatten a preserve-3d context. If a face disappears or a block turns flat, look for one of those on an ancestor before you start rewriting your transforms.