Responsive isometric scenes need a plan for narrow screens. Sometimes the answer is to scale everything down with clamp(), and sometimes it is to hide secondary blocks entirely. What rarely works is letting the scene overflow sideways, which makes the page scroll horizontally and feels broken on a phone.
At a glance
| Projection | Angle | Line ratio |
|---|---|---|
| True isometric | 30° | 1 : 1.732 |
| Pixel art | 26.57° | 1 : 2 |
| Dimetric | 15° / 45° | varies |
Testing on real devices
Accessibility for decorative art is mostly about getting out of the way. If an illustration adds no information, hide it from assistive technology with aria-hidden on its wrapper. If it does carry meaning, such as a chart, give it a text alternative that says what the picture shows, not how it was built.
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.
Dana Ortiz
This finally made the order of rotations click for me. I had them the wrong way round for weeks.
Bea Kowalski
Bookmarked. The table alone is worth it.
Chen Wei
Thanks! A follow-up is already in the drafts.