Lay out an isometric room with CSS grid

Three colours carry the whole illusion. The top face is the lightest because it faces the sky, the left face sits in the middle, and the right face is the darkest. Keep those three roles consistent across the page and readers stop seeing flat shapes. Break the rule once, with a dark top on a single block, and the entire scene looks wrong.

Start with the floor

Testing on real devices matters for 3D transforms. Emulators get the layout right but not always the rendering, and older phones sometimes draw faces in the wrong order or with visible seams. We keep a drawer of old handsets for exactly this reason, and every tutorial gets a quick check on each of them.

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

Reading isometric art is a learned skill, and most readers have learned it from games and instruction manuals. That shared vocabulary is what makes the style so friendly. It also means readers notice immediately when something is off, even if they cannot say why, so consistency matters more than detail.

@media (prefers-reduced-motion: no-preference) {	.cube:hover {		transform: translateZ(calc(var(--unit) / 2));		transition: transform 180ms ease-out;	}}

<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

Shadows that sell the weight

The classic CSS recipe is rotateX(60deg) followed by rotateZ(-45deg). The first rotation tips the square away from you; the second turns it so its corners point up and down. Together they give the familiar diamond. Swap the order and you get something else entirely, because transforms apply from right to left, which catches almost everyone at least once.