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.
Save time
Keep a copy of the finished scene in your snippets. Most new illustrations start as a small change to an old one.
Gus Lindgren
Works nicely in Firefox. Safari needed the prefixed transform-style for us.
Bea Kowalski
Short and useful. More quick tips like this, please.
Nina Ahlberg
Thanks! A follow-up is already in the drafts.
Lena Vogel
I teach an intro CSS class and I am going to use this as the final project.
Hana Sato
The part about layer counts was eye-opening. Our landing page had over a hundred.
Eli Novak
Is there a way to do the shadow without a pseudo-element? Our CMS strips empty spans.
Inês DuarteAuthor
Fixed now, thanks for spotting it.
Omar Haddad
Thanks for covering reduced motion. It is so often an afterthought.