flip card 3d hover perspective transform team member card with bio on back product card with details on hover interactive pricing card reveal need to show extra info without modal want 3D card flip without JS hover reveal for compact card layouts
Flip Card
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/flip-card.json
Flip card
Front / back
Front
Product summary
Back
Hover rotates to reveal secondary details.
Background
Customize
Quick Start
<div class="flip-card w-64 h-40">
<div class="flip-card-inner">
<div class="flip-card-front bg-indigo-600 rounded-xl p-6 text-white">Front</div>
<div class="flip-card-back bg-slate-900 rounded-xl p-6 text-white">Back</div>
</div>
</div>
Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 815 bytes · 44 lines
- Custom Properties
-
--flip-speed--flip-perspective - Classes
-
.flip-card.flip-card-inner.flip-card-front.flip-card-back
flip card 3d hover perspective transform
A 3D card flip using perspective, transform-style: preserve-3d, and backface-visibility: hidden. The card flips on hover to reveal back content.
Team member flip card
<div class="flip-card w-64 h-48 rounded-xl">
<div class="flip-card-inner">
<div class="flip-card-front bg-indigo-600 rounded-xl p-6 flex items-center justify-center">
<p class="text-xl font-bold text-white">Anna Weber</p>
</div>
<div class="flip-card-back bg-slate-900 rounded-xl p-6 flex items-center justify-center">
<p class="text-sm text-slate-300">Founder & CEO — building the future of design systems.</p>
</div>
</div>
</div>