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.
Avoid this
Do not animate width or height on transformed blocks. Animate transform instead so the browser can skip layout.
Alex Moreau
Great write-up. Would love a follow-up on doing the same thing with SVG.
Theo OkaforAuthor
Agreed, this is the part most tutorials skip.
Gus Lindgren
The tip about naming faces instead of colours saved our design system a lot of pain.
Nina Ahlberg
Thanks! A follow-up is already in the drafts.
Kofi Mensah
Glad it helped. The values are in the colour ratios reference.
Chen Wei
Love the palette. Could you share the exact lightness values?
June Park
Short and useful. More quick tips like this, please.
Ivo Petrov
The templates are in the downloads section of the reference post.
Farah Aziz
How would you handle text that needs to wrap on one of the faces?
Soren Dahl
The paper cube exercise sounds fun. Are the templates available somewhere?
Lena Vogel
Works nicely in Firefox. Safari needed the prefixed transform-style for us.
Tess Walsh
Bookmarked. The table alone is worth it.