Design Atlas
한국어
✦ Visual effects

3D transform cube

3D 변환 큐브

A real 3D cube built from six flat faces positioned with translateZ and rotate. The textbook demonstration of perspective plus transform-style: preserve-3d.

Also known as: CSS cubepreserve-3d cube
···
html
<div class="wrap"><div class="stage"><div class="cube" id="cube">
  <i class="face f1">1</i><i class="face f2">2</i><i class="face f3">3</i><i class="face f4">4</i><i class="face f5">5</i><i class="face f6">6</i>
</div></div><div class="label">transform-style: preserve-3d</div></div>
css
.wrap{position:relative;display:grid;place-items:center;gap:14px}
.stage{perspective:700px}
.cube{position:relative;width:26vmin;max-width:110px;aspect-ratio:1;transform-style:preserve-3d;
  --h:calc(min(26vmin,110px) / 2);animation:spin 8s linear infinite}
.face{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:800 20px/1 sans-serif;
  opacity:.94;border:1px solid rgba(255,255,255,.2)}
.f1{background:#5b5bf7;transform:translateZ(var(--h))}
.f2{background:#f25c8a;transform:rotateY(180deg) translateZ(var(--h))}
.f3{background:#18c29c;transform:rotateY(90deg) translateZ(var(--h))}
.f4{background:#ffb648;transform:rotateY(-90deg) translateZ(var(--h))}
.f5{background:#a855f7;transform:rotateX(90deg) translateZ(var(--h))}
.f6{background:#22d3ee;transform:rotateX(-90deg) translateZ(var(--h))}
@keyframes spin{to{transform:rotateX(360deg) rotateY(360deg)}}
.label{color:#fff;font:600 12px monospace;opacity:.7}

One face is just a square div. To turn six of them into a cube: point each one straight at the camera, then push it out along z by half the cube's edge length. translateZ(h) alone is the front face; rotateY(180deg) translateZ(h) is the back; rotateY(±90deg) translateZ(h) are the sides; rotateX(±90deg) translateZ(h) are top and bottom.

The key is transform-style: preserve-3d on the parent (the cube group) — without it the children's 3D placement collapses into one flat plane and it just looks like stacked squares. Perspective on some ancestor still needs to be present for the result to actually read as three-dimensional.

preserve-3d breaks the moment it passes through an ancestor with overflow: hidden, opacity < 1, or a filter — each of those forces its own flat rendering group. If a cube suddenly looks flat, suspect one of those three sitting somewhere in between.

When to use

For product showcases, loaders, or a setting switcher that reads as a physical rotating object. Filling all six faces with rich content gets heavy — only populate the faces you need.