Browser support for 3D transforms is excellent today, with a few sharp edges. The main one is that certain properties, such as overflow hidden or some filters, quietly flatten a preserve-3d context. If a face disappears or a block turns flat, look for one of those on an ancestor before you start rewriting your transforms.
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 |
What games already solved
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.
We prototype every scene on paper first. A sheet of triangle-grid paper, a soft pencil and ten minutes are enough to find out whether a composition works. It is far cheaper to erase a pencil line than to rewrite a dozen nested transforms, and the sketch doubles as documentation when someone asks why a block sits where it does.
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.
Tess Walsh
Short and useful. More quick tips like this, please.
Bea Kowalski
Great write-up. Would love a follow-up on doing the same thing with SVG.
Ivo Petrov
The part about layer counts was eye-opening. Our landing page had over a hundred.
Mara LindqvistAuthor
Agreed, this is the part most tutorials skip.
Eli Novak
Same here. Adding will-change on the wrapper fixed it for me.
Rosa Medina
I tried this on an old iPad and one of the faces flickers on hover. Any idea why?
Chen Wei
Tiny typo in the second code block: the unit is missing on the translate value.
Dana Ortiz
Is there a way to do the shadow without a pseudo-element? Our CMS strips empty spans.
Alex Moreau
We used the grid background on our docs site and it looks great with a dark theme too.
Quinn Adler
This is the clearest explanation of draw order I have read.
Nina Ahlberg
Good question. Usually that means something is flattening the 3D context; check for overflow hidden on a parent.