Game artists have a name for the pixel-art version of isometric: two-to-one. Lines climb one pixel for every two across, which gives clean, stair-stepped edges instead of jagged ones. The angle is about 26.6 degrees rather than 30, and almost nobody notices, which is a nice reminder that looking right beats being exact.
At a glance
| Projection | Angle | Line ratio |
|---|---|---|
| True isometric | 30° | 1 : 1.732 |
| Pixel art | 26.57° | 1 : 2 |
| Dimetric | 15° / 45° | varies |
Why the order of rotations matters
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.
Motion adds a lot to isometric scenes, and it is also the fastest way to make someone feel unwell. Wrap every animation in a prefers-reduced-motion query. For readers who ask for less motion we keep the scene still and use a small colour change on hover instead, which keeps the interface responsive without any movement.
Icons are the hardest isometric art to get right because there is so little room. At small sizes one of the three faces usually has to go, so we pick the two that best describe the object. A book keeps its cover and spine; a box keeps its top and front. Deciding early saves a lot of redrawing.
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.
Mateo Rossi
Tiny typo in the second code block: the unit is missing on the translate value.
Chen Wei
The templates are in the downloads section of the reference post.
Farah Aziz
Works nicely in Firefox. Safari needed the prefixed transform-style for us.
Quinn Adler
Agreed, this is the part most tutorials skip.
Nina Ahlberg
Great write-up. Would love a follow-up on doing the same thing with SVG.
Sam WhitfieldAuthor
Good question. Usually that means something is flattening the 3D context; check for overflow hidden on a parent.
Soren Dahl
We used the grid background on our docs site and it looks great with a dark theme too.
Alex Moreau
How would you handle text that needs to wrap on one of the faces?
Pia Jensen
The part about layer counts was eye-opening. Our landing page had over a hundred.