flip 3d card rotate perspective reveal hover card with front/back content reveal team member photo/bio flip pricing feature comparison flip interactive product showcase need two-sided card with 3D flip on hover want coin-flip animation without JS need reveal effect for hidden content
Flip 3D
Fetch snippet JSON:
curl https://webspire.de/snippets/animations/flip-3d.json
👤
Hover me
Jane Doe
Lead Designer
Design
✓
Done!
Background
Customize
Quick Start
<div class="flip-3d"><div class="flip-3d-inner"><div class="flip-3d-front">Front</div><div class="flip-3d-back">Back</div></div></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 987 bytes · 54 lines
- Custom Properties
-
--flip-speed--flip-perspective - Classes
-
.flip-3d.flip-3d-inner.flip-3d-front.flip-3d-back.flip-3d-x
flip 3d card rotate perspective reveal hover
True 3D card flip using perspective, transform-style: preserve-3d, and backface-visibility: hidden. Front and back faces are stacked; hovering rotates the inner container 180 degrees on the Y axis. Add .flip-3d-x on the container for a top-to-bottom X-axis flip instead.
Profile card flip
<div class="flip-3d h-64 w-48">
<div class="flip-3d-inner h-full w-full">
<div class="flip-3d-front flex items-center justify-center rounded-xl bg-slate-800 text-white">
<span class="text-4xl">👤</span>
</div>
<div class="flip-3d-back flex flex-col items-center justify-center rounded-xl bg-indigo-600 p-4 text-center text-white">
<strong>Jane Doe</strong>
<span class="mt-1 text-sm text-indigo-200">Lead Designer</span>
</div>
</div>
</div>X-axis flip (top to bottom)
<div class="flip-3d flip-3d-x h-40 w-40">
<div class="flip-3d-inner h-full w-full">
<div class="flip-3d-front flex items-center justify-center rounded-full bg-emerald-600 text-3xl text-white">
✓
</div>
<div class="flip-3d-back flex items-center justify-center rounded-full bg-slate-800 text-sm text-white">
Done!
</div>
</div>
</div>