Draw an isometric staircase in pure CSS

Motion adds a lot to isometric scenes, and it is also the fastest way to make someone feel unwell. Wrap every animation in a prefers-reduced-motion query. For readers who ask for less motion we keep the scene still and use a small colour change on hover instead, which keeps the interface responsive without any movement.

Where type fits in

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.

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

Icons are the hardest isometric art to get right because there is so little room. At small sizes one of the three faces usually has to go, so we pick the two that best describe the object. A book keeps its cover and spine; a box keeps its top and front. Deciding early saves a lot of redrawing.