두 화면이 정육면체의 이웃한 면처럼 붙어 함께 회전하며 교체되는 3D 전환.
<div class="stage"><div class="cube"><div class="s a f1">A</div><div class="s b f2">B</div></div></div>.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)}}나가는 화면과 들어오는 화면을 **직각으로 만나는 두 면**에 붙이고, 큐브 전체를 90° 돌리는 전환입니다. 한 면은 안쪽으로 접혀 들어가고 다른 면이 바깥으로 나오므로 푸시의 3D 버전처럼 보입니다. 키노트의 "Cube", 오래된 아이폰 홈 화면 페이지 넘김, 스와이퍼 라이브러리의 cube 효과가 이 방식입니다.
원근감(`perspective`)이 핵심입니다. 값이 작으면 왜곡이 심해 멀미가 나고, 너무 크면 평면 슬라이드와 구분되지 않습니다. 회전 축(`transform-origin`)은 큐브 중심의 깊이 위치에 있어야 두 면이 어긋나지 않습니다.
시선을 끄는 효과라서 반복하면 피로합니다. 정보 전달보다 **연출**이 목적일 때 한정해서 쓰세요.
발표 오프닝, 갤러리·포트폴리오 페이지처럼 연출이 목적인 곳에만 쓰세요. 업무용 앱의 반복 이동에는 피하세요.