Build a real rotating cube from six positioned faces. Color and label each side, drag to spin it yourself, then copy the exact HTML and CSS needed to reproduce it.
Every face of this cube is an actual positioned element in 3D space, built with the same transform techniques you can copy straight into your project.
Color and label the front, back, left, right, top and bottom faces individually.
Click and drag the cube to rotate it manually; auto-rotate pauses while you drag.
Copy the full HTML and CSS, including transforms and an optional spin animation.
Style it, spin it, then take the code with you.
A CSS cube works by treating six flat rectangles as the faces of a box floating in 3D space. Each face starts perfectly overlapping in the center of its parent. To turn that stack into a cube, every face is first rotated with rotateX or rotateY so it points in the direction it should face, and then pushed outward along the new z-axis with translateZ by exactly half the cube's width, since a face needs to sit on the surface of the box, not its center. The parent container needs transform-style: preserve-3d so children keep their own 3D positions instead of being flattened, and an ancestor needs a perspective value so the browser has a vanishing point to render the depth against. Rotating the whole cube afterward, whether by dragging or by an animation, simply rotates that entire coordinate system at once.
Each face is a flat square at the center of the cube by default. Moving it half the cube's size along the z-axis places it exactly on the surface, matching the other faces.
Rotating before translating points a face in the right direction first; translating before rotating would move it along the wrong axis entirely.
Both the cube and any wrapping rotation layer need transform-style: preserve-3d, or the browser will flatten the children back into 2D.
By default the inside faces of the cube remain visible when rotated away, which is usually fine for a solid-looking cube like this one.
Six divs are each rotated to face outward and then pushed away from the center with translateZ by half the cube's size, inside a parent with perspective and transform-style: preserve-3d.
Yes. Click and drag anywhere on the cube to spin it manually. Auto-rotate automatically pauses while you drag and resumes from that angle afterward.
Every face starts stacked flat in the center. Rotating a face with rotateX or rotateY before pushing it out with translateZ is what points it in the correct direction, such as up, down, left or right.
The copied code reproduces the visual cube and an optional auto-rotate keyframe animation. The click-and-drag behavior in this playground is a JavaScript convenience for previewing angles.
Yes. It is completely free, requires no account, and the cube is rendered locally in your browser with no data sent anywhere.
Keep building depth and motion with these free online CSS tools.