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
| Projection | Angle | Line ratio |
|---|---|---|
| True isometric | 30° | 1 : 1.732 |
| Pixel art | 26.57° | 1 : 2 |
| Dimetric | 15° / 45° | varies |
Start with the floor
Tile engines figured out draw order decades ago. Sort by the sum of the column and row, draw from the smallest sum to the largest, and most scenes just work. Tall objects that span several tiles need special care, but the simple rule covers floors, walls and small props, which is most of what a blog illustration needs.
Download
Questions
Can I use this without JavaScript?
Yes. Every scene in our tutorials is pure HTML and CSS; JavaScript only adds optional interactions.
Does it work on phones?
It does, as long as the scene is scaled with clamp() and never wider than the viewport.
Can I use the code in client work?
Yes. All tutorial code is MIT licensed, so you can use it anywhere with attribution in the source.
June Park
Has anyone tried this with container queries? Feels like a good fit.
Gus Lindgren
Our designer drew the scene in Figma and I rebuilt it with your approach in an afternoon.
Alex Moreau
Works nicely in Firefox. Safari needed the prefixed transform-style for us.
Hana Sato
The paper cube exercise sounds fun. Are the templates available somewhere?
Dana Ortiz
Love the palette. Could you share the exact lightness values?
Tess Walsh
Yes, container queries work well; we will cover them soon.
Eli Novak
The part about layer counts was eye-opening. Our landing page had over a hundred.
Nina Ahlberg
We used the grid background on our docs site and it looks great with a dark theme too.
Quinn Adler
Agreed, this is the part most tutorials skip.
Soren Dahl
Glad it helped. The values are in the colour ratios reference.
Omar Haddad
Bookmarked. The table alone is worth it.
Farah Aziz
The templates are in the downloads section of the reference post.