Skip to content
Tools & Workflow

Keyboard shortcuts for our isometric editor

Every shortcut in the Cubefold editor, grouped by task.

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

Engine support
Feature Chrome Firefox Safari
preserve-3d Yes Yes Yes
backface-visibility Yes Yes Prefixed in old versions
individual transform properties Yes Yes Yes

Common mistakes

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.

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.

Readers often ask whether isometric art is still a trend or already a cliché. Our answer is that the style is a tool, like a chart type. It is excellent for explaining structure and relationships, and it is a poor choice for emotion or narrative. Used for the right job, it never really goes out of date.

Download

cubefold-angle-cheatsheet.pdfOne printable page of isometric angles and ratios. 813 B
Download cubefold-angle-cheatsheet.pdf

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.

Share

Written by

Sam Whitfield

Sam makes tile-based games in the evenings and brings the sorting tricks back to the blog. Currently building a very small harbour.

All 17 posts by Sam Whitfield

12 comments

  1. Hana Sato

    This finally made the order of rotations click for me. I had them the wrong way round for weeks.

    Reply to Hana Sato
  2. Gus Lindgren

    Tiny typo in the second code block: the unit is missing on the translate value.

    Reply to Gus Lindgren
  3. Pia Jensen

    We used the grid background on our docs site and it looks great with a dark theme too.

    Reply to Pia Jensen
  4. Kofi Mensah

    Love the palette. Could you share the exact lightness values?

    Reply to Kofi Mensah
  5. Soren Dahl

    Any plans for a video version of this one?

    Reply to Soren Dahl
  6. Dana Ortiz

    I teach an intro CSS class and I am going to use this as the final project.

    Reply to Dana Ortiz
    1. Sam WhitfieldAuthor

      Thanks! A follow-up is already in the drafts.

      Reply to Sam Whitfield
    2. Bea Kowalski

      Yes, container queries work well; we will cover them soon.

      Reply to Bea Kowalski
  7. Omar Haddad

    I tried this on an old iPad and one of the faces flickers on hover. Any idea why?

    Reply to Omar Haddad
    1. Farah Aziz

      Fixed now, thanks for spotting it.

      Reply to Farah Aziz
  8. Lena Vogel

    How would you handle text that needs to wrap on one of the faces?

    Reply to Lena Vogel
    1. Eli Novak

      Same here. Adding will-change on the wrapper fixed it for me.

      Reply to Eli Novak

Leave a comment

Your email address won’t be published. Required fields are marked.