Performance is rarely a problem for one hero cube, but a scene with fifty transformed blocks is a different story. Each block may become its own compositing layer, and every layer costs memory. Open the Layers panel before you ship and count them. If the number surprises you, flatten the static parts into a single SVG.
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 |
Common mistakes
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.
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.
Readers often ask whether isometric art is still a trend or already a cliché. Our answer is that the style is a tool, like a chart type. It is excellent for explaining structure and relationships, and it is a poor choice for emotion or narrative. Used for the right job, it never really goes out of date.
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.
Hana Sato
This finally made the order of rotations click for me. I had them the wrong way round for weeks.
Gus Lindgren
Tiny typo in the second code block: the unit is missing on the translate value.
Pia Jensen
We used the grid background on our docs site and it looks great with a dark theme too.
Kofi Mensah
Love the palette. Could you share the exact lightness values?
Soren Dahl
Any plans for a video version of this one?
Dana Ortiz
I teach an intro CSS class and I am going to use this as the final project.
Sam WhitfieldAuthor
Thanks! A follow-up is already in the drafts.
Bea Kowalski
Yes, container queries work well; we will cover them soon.
Omar Haddad
I tried this on an old iPad and one of the faces flickers on hover. Any idea why?
Farah Aziz
Fixed now, thanks for spotting it.
Lena Vogel
How would you handle text that needs to wrap on one of the faces?
Eli Novak
Same here. Adding will-change on the wrapper fixed it for me.