CSS 3D — preserve-3d Cube Builder

Six flat squares become a solid cube with one property: transform-style: preserve-3d. Rotate it, explode the faces apart to see the construction, then toggle preserve-3d off and watch it collapse back to a flat stack.

The cube

Each face is the same square, rotated to point a different direction, then pushed out by translateZ(55px) — exactly half the cube's width.

-22deg
32deg
55px
Cube transform
transform: rotateX(-22deg) rotateY(32deg);
transform-style
preserve-3d
FRONT
BACK
RIGHT
LEFT
TOP
BOTTOM

Toggle preserve-3d: off and the magic dies — the children flatten onto the parent's plane and you're left with a sad stack of squares. That property is the difference between "a parent with 3D kids" and "a flat picture".

backface-visibility

With backface: visible, when a face turns away you see its back (mirrored text bleeding through). With hidden, faces vanish the instant they turn away — essential for flip cards, optional for an opaque cube. Spin the cube and toggle it to feel the difference.