A while back I set out to build a simple "roll N dice" page — pick a quantity, hit a button, get a total. The random-number part is trivial, one line: Math.floor(Math.random() * 6) + 1 in a loop. What actually took thought was making the dice look like they're tumbling in pure CSS, with no physics engine and no WebGL. My first assumption was that most dice sites spin the cube for a bit and then swap the top face to whatever number they rolled, the way a slot machine reel fakes a stop. Reading through how this one actually works, that's not what happens at all — the roll happens first, and the animation is just catching up to an answer that already exists.
A die is six divs pretending to be a cube
Before any rotation logic, the cube itself is just six absolutely-positioned .face elements, each rotated and pushed out along the Z axis so they form the sides of a box:
.face-one {
transform: translateZ(0.5em);
