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.
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 |
Scaling for small screens
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.
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.
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.
Gus Lindgren
Great write-up. Would love a follow-up on doing the same thing with SVG.
Omar Haddad
Our designer drew the scene in Figma and I rebuilt it with your approach in an afternoon.
Lena Vogel
Thanks! A follow-up is already in the drafts.
Dana Ortiz
Works nicely in Firefox. Safari needed the prefixed transform-style for us.
Bea Kowalski
Is there a way to do the shadow without a pseudo-element? Our CMS strips empty spans.
Hana Sato
The paper cube exercise sounds fun. Are the templates available somewhere?
Kofi Mensah
Love the palette. Could you share the exact lightness values?
Soren Dahl
The part about layer counts was eye-opening. Our landing page had over a hundred.
June Park
Yes, container queries work well; we will cover them soon.
Pia Jensen
This is the clearest explanation of draw order I have read.
Ivo Petrov
The templates are in the downloads section of the reference post.