---
title: "An isometric cube from one color and three divs"
description: "A 3D cube in pure CSS transforms — three faces pushed out with translateZ, shaded from a single hex by nudging HSL lightness. No canvas, no library, optional logo and spin."
date: "2026-05-30"
tags: ["css", "3d", "transform", "frontend"]
---

The blocks feed on [explorer.b3.fun](https://explorer.b3.fun) renders each chain
as a little isometric cube, colored from the chain's brand color. It's pure CSS
transforms, and the shading trick is nicer than I expected:

## Three faces is all you need

Looking at a cube from one corner, you only ever see three faces. So that's all
you build. Each face is a square rotated onto its plane and pushed outward by
half the cube's size, inside a `preserve-3d` parent tilted to an isometric
angle:

```tsx
const half = size / 2;
  transform: "rotateX(29.264deg) rotateY(-225deg)" }}>
```

`rotateY(-225deg)` is what spins the cube around so you're staring at a corner
with the top, front, and right faces all visible.

## Shade it from one color

The part I like: you don't pick three colors. You pass one hex and derive the
faces by nudging lightness in HSL. The top catches the most light, the front
sits in the middle, and the right face stays the base color as the side in
shadow:

```ts
const front = hexToHSL(color, 0.22); // lifted
const right = color;                 // base — the dark side
const top   = hexToHSL(color, 0.30); // brightest
```

Convert hex to HSL, clamp `l + adjust`, convert back to an `hsl()` string. Now
the cube reads as lit from above-left for any brand color you throw at it, and a
single prop changes the whole thing. Drop a logo on the top face (rotated 180°
so it reads upright at this angle), flip on `spin` for a slow keyframe rotation,
and that's the component.

From [explorer.b3.fun](https://explorer.b3.fun), a project I work on at B3. Grab
the component on the [Isometric Cube](/components/cube) page.