Create a responsive isometric hero

Grids are the backbone of every scene we draw. A single grid unit decides tile width, block height and spacing, which is why our illustrations line up even when three different people made them. When something looks off, the first thing we check is whether one element quietly ignored the grid.

Sorting blocks by depth

Isometric drawing keeps every parallel line parallel. There is no horizon and no vanishing point, so a block at the back of the scene is exactly as large as one at the front. That sounds like a limitation, but it is the reason the style works so well for diagrams: you can measure anything, compare anything, and line things up without fighting perspective.

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

We keep every demo in a small repository with one folder per post. Each folder has the HTML, the CSS and a short note on what we tried and dropped. Months later, when a reader asks why a tutorial does something a certain way, the note usually has the answer and saves us a long investigation.

.floor {	background-image:		repeating-linear-gradient(30deg, var(--line) 0 1px, transparent 1px 40px),		repeating-linear-gradient(150deg, var(--line) 0 1px, transparent 1px 40px);}

<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

What games already solved

We prototype every scene on paper first. A sheet of triangle-grid paper, a soft pencil and ten minutes are enough to find out whether a composition works. It is far cheaper to erase a pencil line than to rewrite a dozen nested transforms, and the sketch doubles as documentation when someone asks why a block sits where it does.

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.

Before we publish any illustration we run it through a short review. Is the light direction consistent? Does every block sit on the grid? Is the art hidden from screen readers where it is decorative? Does it survive forced colours mode? It takes five minutes and catches most of the problems we used to fix after launch.