Make an isometric card component

Colour contrast still applies to illustrations that carry meaning. A bar chart drawn as blocks needs enough contrast between the bars and the floor, and labels on the faces need the same contrast as body text. Decorative scenes have more freedom, but we still avoid pale blocks on a pale background.

Why the order of rotations matters

Shadows on the floor sell the idea that a block has weight. A blurred ellipse, skewed to match the grid and placed slightly offset from the light, is usually enough. Real shadows would change with the height of the block, and adding that detail makes towers and stairs look much more convincing.

1. Start with a checkbox

   Use a real input type="checkbox" so the control works with a keyboard and screen readers.

2. Draw the track

   Style the label as a tilted track with a darker right face.

3. Slide the block

   Move the block with translate when the input is checked, and skip the transition for reduced motion.

The code

Before we publish any illustration we run it through a short review. Is the light direction consistent? Does every block sit on the grid? Is the art hidden from screen readers where it is decorative? Does it survive forced colours mode? It takes five minutes and catches most of the problems we used to fix after launch.

Custom properties make isometric CSS far easier to maintain. Instead of hard-coding sizes, we define a single unit on the scene wrapper and multiply it everywhere else. Changing the unit rescales the whole illustration, keeps the proportions intact and means a phone layout needs one media query instead of twenty.

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.

Isometric drawing keeps every parallel line parallel. There is no horizon and no vanishing point, so a block at the back of the scene is exactly as large as one at the front. That sounds like a limitation, but it is the reason the style works so well for diagrams: you can measure anything, compare anything, and line things up without fighting perspective.

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.

Readers often ask whether isometric art is still a trend or already a cliché. Our answer is that the style is a tool, like a chart type. It is excellent for explaining structure and relationships, and it is a poor choice for emotion or narrative. Used for the right job, it never really goes out of date.

Reading isometric art is a learned skill, and most readers have learned it from games and instruction manuals. That shared vocabulary is what makes the style so friendly. It also means readers notice immediately when something is off, even if they cannot say why, so consistency matters more than detail.

@media (prefers-reduced-motion: no-preference) {	.cube:hover {		transform: translateZ(calc(var(--unit) / 2));		transition: transform 180ms ease-out;	}}

Colours used

When to switch to SVG

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.