Draw isometric text with transforms

Shadows on the floor sell the idea that a block has weight. A blurred ellipse, skewed to match the grid and placed slightly offset from the light, is usually enough. Real shadows would change with the height of the block, and adding that detail makes towers and stairs look much more convincing.

Putting it together

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.

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 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.

const sorted = tiles.toSorted((a, b) => (a.x + a.y) - (b.x + b.y));for (const tile of sorted) {	scene.append(tile.element);}

<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

Start with the floor

SVG is often the better choice for complex scenes. CSS cubes are fun to build and easy to animate, but a city block made of hundreds of divs is hard to change and heavy to render. We draw the static parts in SVG, keep the interactive blocks in CSS, and layer the two together.