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.
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.
Choosing the three face colours
Performance is rarely a problem for one hero cube, but a scene with fifty transformed blocks is a different story. Each block may become its own compositing layer, and every layer costs memory. Open the Layers panel before you ship and count them. If the number surprises you, flatten the static parts into a single SVG.
- Hide decorative art with
aria-hidden - Wrap animations in a reduced-motion query
- Check the scene in forced colours mode
- Describe informative art in plain text
Edge lines deserve more attention than they usually get. A thin, slightly darker line along the bottom edges grounds each block, and a lighter line on the top edge suggests a highlight. Using currentColor for those lines means a single colour change on the wrapper restyles every outline in the scene.
A quick review before shipping
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.
If you cannot sketch it on grid paper in five minutes, it is too complicated for CSS.
Mara Lindqvist
Hover effects on isometric blocks work best when they follow the same rules as the static scene. Lift a block along its vertical axis, deepen its shadow on the floor, and leave the other blocks alone. Moving a block sideways, or changing its angle, breaks the projection and makes the scene feel unstable.
Edges and highlights
Accessibility for decorative art is mostly about getting out of the way. If an illustration adds no information, hide it from assistive technology with aria-hidden on its wrapper. If it does carry meaning, such as a chart, give it a text alternative that says what the picture shows, not how it was built.
Do not animate width or height on transformed blocks. Animate transform instead so the browser can skip layout.
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.
Keeping everything on the grid
Palettes for isometric work start from one hue. Pick it, then shift only the lightness for the three faces, and cool the shadow slightly towards blue. Adding a second hue for accents is fine, but keep it to small elements such as windows or buttons, or the scene starts to look like a patchwork.
If you cannot sketch it on grid paper in five minutes, it is too complicated for CSS.
Mara LindqvistCustom 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.
Where type fits in
Grids are the backbone of every scene we draw. A single grid unit decides tile width, block height and spacing, which is why our illustrations line up even when three different people made them. When something looks off, the first thing we check is whether one element quietly ignored the grid.
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.
Handling motion
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.
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.
Start with the floor
Tile engines figured out draw order decades ago. Sort by the sum of the column and row, draw from the smallest sum to the largest, and most scenes just work. Tall objects that span several tiles need special care, but the simple rule covers floors, walls and small props, which is most of what a blog illustration needs.
Typography on a tilted plane is readable only in small doses. A single word on the side of a block looks great; a paragraph set at an angle is exhausting. Keep running text flat and upright, and save the skewed type for labels, numbers and the occasional headline where the shape of the word matters more than speed.
Scaling for small screens
SVG is often the better choice for complex scenes. CSS cubes are fun to build and easy to animate, but a city block made of hundreds of divs is hard to change and heavy to render. We draw the static parts in SVG, keep the interactive blocks in CSS, and layer the two together.
Comments