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.
Avoid this
Do not animate width or height on transformed blocks. Animate transform instead so the browser can skip layout.
CSS
.floor { background-image: repeating-linear-gradient(30deg, var(--line) 0 1px, transparent 1px 40px), repeating-linear-gradient(150deg, var(--line) 0 1px, transparent 1px 40px);}
Rosa Medina
Any plans for a video version of this one?
Omar Haddad
Short and useful. More quick tips like this, please.
Tess Walsh
Love the palette. Could you share the exact lightness values?
Quinn Adler
Good question. Usually that means something is flattening the 3D context; check for overflow hidden on a parent.
Gus Lindgren
This is the clearest explanation of draw order I have read.
Alex Moreau
Tiny typo in the second code block: the unit is missing on the translate value.
Lena Vogel
Glad it helped. The values are in the colour ratios reference.
Pia Jensen
Works nicely in Firefox. Safari needed the prefixed transform-style for us.