An isometric cube from one color and three divs

The blocks feed on 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:

const half = size / 2;
<div style={{ transformStyle: "preserve-3d",
  transform: "rotateX(29.264deg) rotateY(-225deg)" }}>
  <div style={{ transform: `rotateY(0deg)  translateZ(${half}px)` }} /> {/* front */}
  <div style={{ transform: `rotateY(90deg) translateZ(${half}px)` }} /> {/* right */}
  <div style={{ transform: `rotateX(90deg) translateZ(${half}px)` }} /> {/* top  */}
</div>

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:

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, a project I work on at B3. Grab the component on the Isometric Cube page.