Dice Roller — CSS 3D Dice Roll Animation (JS)

A rolling 3D die is a small piece of delight that's also a perfect lesson in CSS 3D transforms. This snippet builds a real cube — six faces with correct pip layouts — that tumbles and lands showing a random face, in pure HTML, CSS, and a few lines of vanilla JavaScript, with no library and no images.

A genuine 3D cube, not a flat sprite

The cube is six div faces positioned in 3D space. The container has transform-style: preserve-3d so its children render in a shared 3D scene, and each face is pushed out from the centre with translateZ(48px) after being rotated to point in its direction — front, back, left, right, top, bottom. The scene has perspective so the cube looks dimensional rather than isometric. This is the canonical way to build a CSS cube, and it means the die is a real object you can rotate to any orientation.

Pips placed with CSS grid areas

Each face's dots are laid out with CSS grid template areas — a 3×3 grid where named cells hold the pips for that number. One pip sits in the centre cell; two sit in opposite corners; five fills the corners plus centre; and so on. Using named grid areas (rather than absolute positioning) makes each face's layout declarative and easy to read, and it's the cleanest way to get the classic die-face arrangements without hand-tuning pixel positions.

Rolling by rotating to a known orientation

The roll is one CSS transition. For each face there's a base rotateX/rotateY that brings it to the front, matching the face transforms. Rolling picks a random 1–6, looks up that base rotation, and adds several full 360° turns so the cube visibly tumbles before settling — landing exactly on the chosen face because the final orientation is a known value plus whole turns. Accumulating the spin count across rolls means the cube always rotates forward, never snapping backwards, so consecutive rolls look continuous.

Honest randomness and a settled result

The result is chosen with Math.random() *before* the animation, so the visual outcome always matches the reported number — the die isn't faked after the fact. The button disables during the ~1s tumble and re-enables with the result text when it lands, so users can't spam mid-roll and the announced value always corresponds to the resting face.

Drop-in and adaptable

The whole thing is self-contained and themeable with CSS. Use it for a board-game UI, a randomiser, a "pick for me" control, or just a tactile bit of fun. It's also a clear, complete reference for CSS 3D cubes, preserve-3d, and transform-based animation that you can adapt into any 3D interaction.