Add a perspective and you can rotate elements in 3D: rotateY(180deg) flips a card, translateZ moves toward/away. transform-style: preserve-3d keeps children in the same 3D space — the basis of flip cards and 3D scenes.
Add a perspective and you can rotate elements in 3D: rotateY(180deg) flips a card, translateZ moves toward/away. transform-style: preserve-3d keeps children in the same 3D space — the basis of flip cards and 3D scenes.
<!doctype html><html><head><meta charset="utf-8">
<style>.scene{perspective:600px}.card{width:140px;height:90px;transition:transform .5s;transform-style:preserve-3d;position:relative}.scene:hover .card{transform:rotateY(180deg)}.face{position:absolute;inset:0;backface-visibility:hidden;display:grid;place-items:center;color:#06040d}.front{background:#b388ff}.back{background:#8aff9d;transform:rotateY(180deg)}</style></head><body style="background:#06040d;padding:30px"><div class="scene"><div class="card"><div class="face front">front</div><div class="face back">back</div></div></div></body></html>