Stacking order is the part that trips people up. In a flat layout, later elements paint on top. In a tilted scene, a block that is further back must paint first, even if it appears later in the markup. Either sort your markup by depth or give each block a z-index derived from its row and column.
At a glance
| Page type | Transformed elements | Notes |
|---|---|---|
| Article | Up to 12 | Hero and inline figures |
| Landing page | Up to 40 | Flatten static scenery |
| Dashboard | Up to 8 | Charts only |
Where type fits in
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.
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.
Download
Questions
Is isometric art accessible?
Decorative art is fine when hidden from assistive technology. Informative art needs a text alternative.
How many cubes are too many?
Once the Layers panel shows more than about forty layers, flatten the static parts into SVG.
Why does my cube look flat?
Something on an ancestor, such as overflow: hidden or a filter, is flattening the 3D context.
Which angle should I use?
Use true isometric for CSS and the 2:1 ratio for pixel art. Readers will not notice the difference.
Nina Ahlberg
This is the clearest explanation of draw order I have read.
Eli Novak
Is there a way to do the shadow without a pseudo-element? Our CMS strips empty spans.
Pia Jensen
Works nicely in Firefox. Safari needed the prefixed transform-style for us.
Alex Moreau
Our designer drew the scene in Figma and I rebuilt it with your approach in an afternoon.
Chen Wei
Has anyone tried this with container queries? Feels like a good fit.
Hana Sato
The templates are in the downloads section of the reference post.
Priya RamanAuthor
Yes, container queries work well; we will cover them soon.
Soren Dahl
Thanks for covering reduced motion. It is so often an afterthought.