3D Rotating Cube Loader — Real CSS 3D Cube with Six True Faces

A lot of "3D cube" loaders on the web are actually a single flat square with a fake shadow or a skewed pseudo-element — a 2D illusion, not a real cube. This snippet builds an actual six-sided CSS cube: six real elements, each individually rotated and pushed outward along the Z axis by exactly half the cube's edge length, so they form a genuinely closed 3D box that a perspective-enabled camera can rotate around and view from any angle, in plain HTML and CSS with no JavaScript at all.

Perspective, then a 3D-preserving parent

The outer .cb-scene sets perspective: 600px, which establishes the "camera distance" for everything inside it — without it, all the 3D transforms below would flatten back to 2D. The .cb-cube element inside is given transform-style: preserve-3d, which is what allows its six children to keep their individual 3D positions relative to each other and to the parent's own rotation, instead of each face's transform being flattened independently.

The correct six-face transform math

Every face is a full-size div absolutely positioned to overlap all the others at the cube's center, and each gets exactly two transforms in this order: a rotation, then a translation along Z. The rotation happens first (around the shared center), which reorients that face's own local Z axis; the translateZ(half) that follows then pushes the face outward along that newly-rotated axis, landing it flush against the correct side of the cube rather than at some skewed offset. Concretely: .cb-front needs no rotation, so translateZ(--half) alone pushes it straight toward the viewer. .cb-back is rotated 180° first so its own local Z axis now points away from the viewer, and the same translateZ(--half) push lands it on the opposite side. .cb-right and .cb-left rotate ±90° around Y before translating, and .cb-top/.cb-bottom rotate ±90° around X — six faces, six correctly-oriented pushes, one shared --half distance, forming a real closed cube with no gaps or overlaps.

One CSS variable drives the whole geometry

--size is defined once on .cb-scene, and --half is computed from it with calc(var(--size) / 2). Because every face's translation distance references --half rather than a hardcoded pixel value, changing --size alone rescales the entire cube correctly — every face stays flush with no gaps, since the geometry is expressed as a relationship rather than six independently-tuned numbers.

Spinning on two axes at once

The cube's own @keyframes animates transform: rotateX() rotateY() together from 0deg to 360deg on both axes simultaneously over one loop. Because both rotations run at the same rate, the cube traces a genuinely three-dimensional tumble rather than spinning flatly around a single vertical axis — every face becomes visible from a constantly-changing angle as the loop repeats.

backface-visibility keeps it clean

Each face has backface-visibility: hidden, so a face currently rotated away from the viewer doesn't render its (identical, mirrored) backside poking through — important once the whole cube is tumbling and faces are constantly swinging into and out of view.

Reduced motion

Under prefers-reduced-motion, the animation is disabled and the cube is frozen at a fixed, still genuinely three-dimensional angle (a static rotateX(-20deg) rotateY(35deg)) so users who opt out of motion still see the real 3D shape rather than a flattened front face. Pair it with an orbit loader or a wave loader for a non-3D alternative where perspective support or motion preference makes a real cube less appropriate.