Reading isometric art is a learned skill, and most readers have learned it from games and instruction manuals. That shared vocabulary is what makes the style so friendly. It also means readers notice immediately when something is off, even if they cannot say why, so consistency matters more than detail.
At a glance
| Feature | Chrome | Firefox | Safari |
|---|---|---|---|
| preserve-3d | Yes | Yes | Yes |
| backface-visibility | Yes | Yes | Prefixed in old versions |
| individual transform properties | Yes | Yes | Yes |
Putting it together
Edge lines deserve more attention than they usually get. A thin, slightly darker line along the bottom edges grounds each block, and a lighter line on the top edge suggests a highlight. Using currentColor for those lines means a single colour change on the wrapper restyles every outline in the scene.
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.
Mateo Rossi
How would you handle text that needs to wrap on one of the faces?
Mara LindqvistAuthor
Same here. Adding will-change on the wrapper fixed it for me.
Hana Sato
The templates are in the downloads section of the reference post.
Ivo Petrov
Has anyone tried this with container queries? Feels like a good fit.
Eli Novak
I tried this on an old iPad and one of the faces flickers on hover. Any idea why?
Quinn Adler
Works nicely in Firefox. Safari needed the prefixed transform-style for us.
Chen Wei
The paper cube exercise sounds fun. Are the templates available somewhere?
Soren Dahl
Any plans for a video version of this one?