The classic CSS recipe is rotateX(60deg) followed by rotateZ(-45deg). The first rotation tips the square away from you; the second turns it so its corners point up and down. Together they give the familiar diamond. Swap the order and you get something else entirely, because transforms apply from right to left, which catches almost everyone at least once.
What you built
- A cube with three shaded faces
- A floor grid from gradients
- A hover state that lifts the block
Farah Aziz
Love the palette. Could you share the exact lightness values?
Gus Lindgren
Yes, container queries work well; we will cover them soon.
Inês DuarteAuthor
Glad it helped. The values are in the colour ratios reference.
Tess Walsh
Works nicely in Firefox. Safari needed the prefixed transform-style for us.
Bea Kowalski
This finally made the order of rotations click for me. I had them the wrong way round for weeks.
June Park
Short and useful. More quick tips like this, please.
Soren Dahl
Tiny typo in the second code block: the unit is missing on the translate value.
Eli Novak
Our designer drew the scene in Figma and I rebuilt it with your approach in an afternoon.