Why isometric drawings never use vanishing points

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.

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.

Testing on real devices

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.

• Keep every parallel line parallel
• Use one grid unit for every size
• Shade tops lightest and rights darkest

Typography on a tilted plane is readable only in small doses. A single word on the side of a block looks great; a paragraph set at an angle is exhausting. Keep running text flat and upright, and save the skewed type for labels, numbers and the occasional headline where the shape of the word matters more than speed.

Shadows that sell the weight

The best way to learn isometric CSS is to rebuild something you see every day. A mug, a keyboard key or a stack of books all make good first projects. They are simple enough to finish in an evening, and each one teaches a different trick, from rounded tops to repeating elements.

Depth is a decision about colour long before it is a decision about geometry.

Inês Duarte

Palettes for isometric work start from one hue. Pick it, then shift only the lightness for the three faces, and cool the shadow slightly towards blue. Adding a second hue for accents is fine, but keep it to small elements such as windows or buttons, or the scene starts to look like a patchwork.

Tokens that survive a redesign

Hover effects on isometric blocks work best when they follow the same rules as the static scene. Lift a block along its vertical axis, deepen its shadow on the floor, and leave the other blocks alone. Moving a block sideways, or changing its angle, breaks the projection and makes the scene feel unstable.

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.

What it costs the browser

Colour contrast still applies to illustrations that carry meaning. A bar chart drawn as blocks needs enough contrast between the bars and the floor, and labels on the faces need the same contrast as body text. Decorative scenes have more freedom, but we still avoid pale blocks on a pale background.

Depth is a decision about colour long before it is a decision about geometry.

Inês Duarte

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.

Common mistakes

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.

Game artists have a name for the pixel-art version of isometric: two-to-one. Lines climb one pixel for every two across, which gives clean, stair-stepped edges instead of jagged ones. The angle is about 26.6 degrees rather than 30, and almost nobody notices, which is a nice reminder that looking right beats being exact.

Why the order of rotations matters

Workshops taught us more than any tutorial. Watching people fold paper cubes and then rebuild them in CSS showed exactly where the mental model breaks: the order of rotations, the origin of each face, and the moment a block turns inside out. Most of our tutorials now start with the paper version for that reason.