Cube transition

큐브 전환

Two screens act as adjacent faces of a cube and rotate together to swap.

Also known as: Cube rotate3D cube
···
html
<div class="stage"><div class="cube"><div class="s a f1">A</div><div class="s b f2">B</div></div></div>
css
.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.s{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:800 clamp(16px,6vmin,30px)/1 sans-serif;color:#fff;letter-spacing:.04em}
.a{background:linear-gradient(135deg,#3b3b98,#1e1e4a)}
.b{background:linear-gradient(135deg,#f25c8a,#c9184a)}
.stage{perspective:160vw}
.cube{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(-50vw);animation:cube 4s cubic-bezier(.6,0,.2,1) infinite}
.f1{transform:rotateY(0) translateZ(50vw)}
.f2{transform:rotateY(90deg) translateZ(50vw)}
@keyframes cube{0%,20%{transform:translateZ(-50vw) rotateY(0)}
  50%,70%{transform:translateZ(-50vw) rotateY(-90deg)}100%{transform:translateZ(-50vw) rotateY(0)}}

The outgoing and incoming screens are mounted on **two faces meeting at a right angle**, and the whole cube rotates 90°. One face folds away while the other swings in, so it looks like a 3D push. Keynote's "Cube", the old iPhone home-screen page swipe and Swiper's cube effect all work this way.

`perspective` is the key. Too small and distortion becomes nauseating; too large and it is indistinguishable from a flat slide. The rotation axis (`transform-origin`) must sit at the cube centre's depth or the faces will separate.

It is attention-grabbing, so it tires with repetition. Reserve it for **showmanship**, not for conveying information.

When to use

Use it for presentation openers or portfolio galleries where showmanship is the goal. Avoid it for repeated navigation in work apps.

Open as page ↗

Suggest an entry

Tell us about a term, effect or component that’s missing. We read every suggestion.