Workshops taught us more than any tutorial. Watching people fold paper cubes and then rebuild them in CSS showed exactly where the mental model breaks: the order of rotations, the origin of each face, and the moment a block turns inside out. Most of our tutorials now start with the paper version for that reason.
Grid experiments in the margins
6 imagesJPG, 1200 × 1200
Testing on real devices matters for 3D transforms. Emulators get the layout right but not always the rendering, and older phones sometimes draw faces in the wrong order or with visible seams. We keep a drawer of old handsets for exactly this reason, and every tutorial gets a quick check on each of them.
Keeping everything on the grid
Browser support for 3D transforms is excellent today, with a few sharp edges. The main one is that certain properties, such as overflow hidden or some filters, quietly flatten a preserve-3d context. If a face disappears or a block turns flat, look for one of those on an ancestor before you start rewriting your transforms.
June Park
We used the grid background on our docs site and it looks great with a dark theme too.
Farah Aziz
Any plans for a video version of this one?
Soren Dahl
Short and useful. More quick tips like this, please.
Ivo Petrov
This finally made the order of rotations click for me. I had them the wrong way round for weeks.
Nina Ahlberg
Has anyone tried this with container queries? Feels like a good fit.
Tess Walsh
Thanks! A follow-up is already in the drafts.
Inês DuarteAuthor
The templates are in the downloads section of the reference post.
Alex Moreau
Love the palette. Could you share the exact lightness values?
Bea Kowalski
The paper cube exercise sounds fun. Are the templates available somewhere?
Gus Lindgren
Tiny typo in the second code block: the unit is missing on the translate value.
Pia Jensen
Yes, container queries work well; we will cover them soon.