Animation · Morph & transform · 17
Flip Card Flip Card = a card that rotates in 3D on its Y axis to reveal a different face (front/back) on hover or tap.
Skip to the modify prompt →
Play Pause Replay
Respects prefers-reduced-motion: the animation is disabled and the final state is shown.
How to prompt it Copy Prompt
Basic Modify Advanced
Make a flip card: rotateY 0 to 180 on hover with perspective, front and back faces, transform only.
Flip on a vertical (X) axis instead and shorten the turn to 0.6s for a snappier toggle.
Drive the flip from a real hover/tap state (not an infinite loop), add perspective: 1000px on the parent, expose --flip-duration, and under prefers-reduced-motion swap to an opacity cross-fade between faces. Keep both faces in the same bounding box.
Modify prompts change only the target — the rest of your page stays untouched.
What is a Flip Card? A flip card rotates around its vertical axis to show a back face — front holds the teaser, back holds the detail. It is a compact two-state container that feels physical because it uses real perspective. Flip on hover for desktop, on tap for touch, and keep it to one axis so it never looks like a glitch.
Animation Specimen
Trigger hover
Tech css
Duration 3.2s
Easing cubic-bezier(0.4, 0, 0.2, 1)
Performance transform When to use Teaser -> detail (product, profile, glossary term) Two-sided stats or Q&A cards Avoid when When both faces must be visible at once (use tabs) On tiny touch targets — the back is hard to read Give the parent real perspective, or the flip looks like a flat skew, not a turn.
Get the code Copy CSS
CSS HTML
.anim-el {
animation-iteration-count: infinite;
animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }
.flip { perspective: 700px; width: min(150px, 100%); height: 100px; }
.flip-inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation-name: flip;
animation-duration: var(--anim-duration, 3.2s);
animation-timing-function: var(--anim-easing, cubic-bezier(0.4, 0, 0.2, 1));
}
.flip-front,
.flip-back {
position: absolute;
inset: 0;
display: grid;
place-items: center;
border-radius: 12px;
backface-visibility: hidden;
font: 600 14px/1 'Plus Jakarta Sans', system-ui, sans-serif;
}
.flip-front { background: var(--anim-accent); color: #fff; }
.flip-back {
background: var(--surface, #fff);
border: 1px solid var(--border, #e6e7ec);
color: var(--ink, #1a1c22);
transform: rotateY(180deg);
}
@keyframes flip {
0%, 40% { transform: rotateY(0); }
60%, 100% { transform: rotateY(180deg); }
} <div class="flip"><div class="flip-inner anim-el"><div class="flip-front">Front</div><div class="flip-back">Back</div></div></div> Copy and drop it into your project. The motion touches only transform / opacity; colour comes from --anim-accent.
Copy Prompt Make a flip card: rotateY 0 to 180 on hover with perspective, front and back faces, transform only.