3D flip in
A card swings up from flat on its back to face the viewer, using perspective and rotateX.
CSSIntermediate
<div class="stage"><article class="card"><h2>Depth</h2><p>I swing up into view.</p></article></div>.stage{perspective:900px}
.card{width:min(300px,84vw);padding:30px;border-radius:16px;background:linear-gradient(145deg,#3a2220,#1f0f0e);
border:1px solid #5a3a35;transform-origin:50% 100%;backface-visibility:hidden;
animation:flip 1.1s cubic-bezier(.2,.9,.25,1) both}
h2{margin:0 0 6px}p{margin:0;color:#cfc3c1}
@keyframes flip{from{opacity:0;transform:rotateX(-90deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.card{animation:none}}<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>3D flip in</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:grid;place-items:center;background:#140807;color:#fffffc;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
.stage{perspective:900px}
.card{width:min(300px,84vw);padding:30px;border-radius:16px;background:linear-gradient(145deg,#3a2220,#1f0f0e);
border:1px solid #5a3a35;transform-origin:50% 100%;backface-visibility:hidden;
animation:flip 1.1s cubic-bezier(.2,.9,.25,1) both}
h2{margin:0 0 6px}p{margin:0;color:#cfc3c1}
@keyframes flip{from{opacity:0;transform:rotateX(-90deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.card{animation:none}}
</style></head>
<body><div class="stage"><article class="card"><h2>Depth</h2><p>I swing up into view.</p></article></div></body></html>Good for
Feature cards, pricing tiles and stat blocks that need depth.
Watch out for
Put perspective on the parent, not the card, so every child shares one vanishing point.
Accessibility
Wrap motion in @media (prefers-reduced-motion: reduce) and switch it off or shorten it for people who ask for less movement.