Static cards bore users. CSS flip cards fix that with smooth 3D rotation that reveals hidden content on hover or click.
These interactive elements transform ordinary product displays, team profiles, and pricing tables into engaging UI components.
No JavaScript required for basic implementations. Just pure CSS3 transforms and transitions doing the heavy lifting.
This collection of CSS flip card examples covers everything from simple hover effects to click-triggered CSS animations that work on mobile.
You’ll get working code snippets, direction variations, accessibility fixes, and solutions to common problems like flickering and flat-looking flips.
What Is a CSS Flip Card
A CSS flip card is a UI component that rotates between two visible faces using CSS3 transforms and transitions.
The card responds to hover, click, or JavaScript events to reveal hidden content on the back.
You’ve seen these everywhere. Product showcases, profile cards, pricing tables, memory games.
The magic happens through the perspective property, 3D transforms, and backface-visibility working together.
How CSS Flip Cards Work
The flip effect relies on three CSS properties creating a 3D space.
Perspective adds depth. Transform-style: preserve-3d keeps child elements in 3D space. Backface-visibility: hidden prevents the reversed face from showing through.
When triggered, rotateY spins the card horizontally. RotateX flips it vertically.
When to Use CSS Flip Cards
Flip cards work best when you need to show two related pieces of information without cluttering the user interface.
Common applications include:
- Product card designs with image front, details back
- Team member profiles
- Pricing comparison cards
- Portfolio showcases
- Interactive memory games
- Business card simulations
CSS Flip Cards Examples To Check Out
CSS Flip Cards Magic
Swanky Business Card with Flip Vibes
See the Pen
Business Card by Nicholas Dobie (@nrdobie)
on CodePen.
Flip it Like 3D with jQuery & CSS3
Customizable Flip Cards with HTML, CSS, & JS
See the Pen
Flip Card by 101 Computing (@101Computing)
on CodePen.
Picture Perfect Flip Card
See the Pen
Figure Flip Card by Brad Bodine (@bbodine1)
on CodePen.
3D Business Card Vibes Online
See the Pen
Business Card by Lubos (@mrlubos)
on CodePen.
Spin it in 3D with CSS
See the Pen
CSS 3D Flip Cards by Welling Guzman (@wellingguzman)
on CodePen.
Makeup Palettes: Flip Edition
See the Pen
CSS Grid: Makeup Palettes by Olivia Ng (@oliviale)
on CodePen.
Tilt, Then Flip. It’s a CSS thing
See the Pen
Tilt and flip playing cards by Manjit Karve (@manjitkarve)
on CodePen.
Just Another Flipping Card
See the Pen
Flipping card by Sergey Nikishkin (@nikishkin)
on CodePen.
Rotate with CSS, Fill with JS
See the Pen
CSS Flip Card (content with JS) by Diego Bruno Rodrigues (@DiegoBR)
on CodePen.
Hover & Behold: The Flip
See the Pen
Card flip 2 by Aakash Thakur (@Sky-123)
on CodePen.
Keeping it Pure with CSS
See the Pen
Pure CSS Flip Card by Aron (@aron-tw)
on CodePen.
Business Card, But Make it Flippable
See the Pen
Card Flip Jquery by bycreator (@bycreator)
on CodePen.
Get Your Flip-Ready Download Cards
See the Pen
Download Cards by Evan Wieland (@EvanWieland)
on CodePen.
Flip. Flip. And Flip Again
See the Pen
Card Flip by Charles Ojukwu (@cojdev)
on CodePen.
Business Card: The Digital Frontier
See the Pen
CSS Business Card by Keith Pickering (@keithpickering)
on CodePen.
Holiday Cards with a CSS Fold
See the Pen
Holiday Feature Folding Cards [Pure CSS] by Madalena (@Maza-designDev)
on CodePen.
Figcaption’s Flipping Wonder
See the Pen
Lazy Loading Fig+Figcaption & Flipping Card by Alex Paul (@alex_paul)
on CodePen.
Bare-Bones Flip Card
See the Pen
Simple flip card CSS by TOMAZKI (@Podgro)
on CodePen.
Say Hello to Login, Flip-Style
See the Pen
Login/Sign Up Flip Card by Evan Clemens (@evanclemens)
on CodePen.
Swipin’ Flip Card Fun
See the Pen
CSS: Flip Card con deslizamiento by Marco (@marco3w)
on CodePen.
The More, The Merrier: Multi-Flip Cards
See the Pen
Flip Card by Andy McFee (@andymcfee)
on CodePen.
Gamers, Flip Out With Player Cards!
See the Pen
Player Flip Cards by Nick Nikolov (@necks)
on CodePen.
Twist, Turn, and Go 3D
See the Pen
3D card flip rotate by Paulo Figueiredo (@palofigueiredo)
on CodePen.
Spacey 3D Flips
See the Pen
3D Flip Card Effect by Samet Erpik (@samerpik)
on CodePen.
Socialize with Flipping Style
See the Pen
Social Flip Cards by Charlotte Dann (@pouretrebelle)
on CodePen.
Magic’s First Card Trick
See the Pen
Magic Flip Cards 1: The Standard Implementation by Smashing Magazine (@smashingmag)
on CodePen.
Profile Cards in 3D
See the Pen
3D Profile Flip Card by Nick Hempsey (@nickhempsey)
on CodePen.
F. A. Rodrigues’s Flippin’ Marvel
See the Pen
Flip Cards by F. A. Rodrigues (@farodrigues)
on CodePen.
Menu Flips with Style
See the Pen
Lynda.com Style Flip-card Menu by Aaron Snowberger (@jekkilekki)
on CodePen.
When Magic Flips Go Rogue
See the Pen
Magic Flip Cards 2: How Absolute Positioning Fails by Smashing Magazine (@smashingmag)
on CodePen.
Clicky Buttons on a Flip-Card? Why Not!
See the Pen
Flip-card with js buttons by Björn Rosenberg (@Bjornros)
on CodePen.
Let’s Go Halfsies with 3D Flip
See the Pen
Half flip cards 3d by David Foliti (@marlenesco)
on CodePen.
Fancy Schmancy 3D Hover Magic
See the Pen
Fancy 3D flip card (on hover – CSS) by Travis Williamson (@travisw)
on CodePen.
Every Browser’s Bestie: The Flip Card
See the Pen
Cross-Browser Flip Card by Rodrigo Hernando (@rhernando)
on CodePen.
Card That’s Got The Moves
See the Pen
Flipping Card by Mario (@mariosmaselli)
on CodePen.
Flip-Flopping Fun
See the Pen
Flip-Flop by Arif Safiullah (@prantor19)
on CodePen.
React-ing with a Flippable Vibe
See the Pen
React Flipping Card with Tutorial by Alex Devero (@alexdevero)
on CodePen.
Wanna Play? With Flippable Cards?
See the Pen
Flippable Playing Cards by smpnjn (@smpnjn)
on CodePen.
Flipping Out with 3D CSS
See the Pen
CSS 3D Flipping Card Hover Effect by FrankieDoodie (@FrankieDoodie)
on CodePen.
Bootstrap’s Flipping Bestie
See the Pen
Flipping Card Bootstrap. by Nishant Guleria (@nishant88)
on CodePen.
Delight in Every Flip
See the Pen
Flipping Card – Delightful Version by Amazing Rando (@amazingrando)
on CodePen.
What CSS Properties Create the Flip Effect
Three properties handle the heavy lifting for any card flip animation.
Miss one and the effect breaks. Get them right and you have smooth 3D rotation.
What Does the Perspective Property Do
Perspective defines how far the viewer sits from the 3D plane.
Lower values (300-500px) create dramatic, exaggerated flips. Higher values (800-1200px) produce subtle, realistic rotation.
Apply it to the parent container, not the card itself.
What Does Transform-Style Preserve-3D Do
This property tells child elements to maintain their position in 3D space.
Without preserve-3d, both card faces flatten against the parent. The back face rotation gets nullified and you see both sides simultaneously.
What Does Backface-Visibility Hidden Do
Backface-visibility: hidden prevents the reversed content from showing through during rotation.
Cards have two faces stacked on top of each other. This property hides whichever face points away from the viewer.
Basic CSS Flip Card Example
Here’s a working flip card you can copy and modify.
The structure follows a consistent pattern: scene wrapper, card container, front face, back face.
HTML Structure for a Flip Card
Every flip card needs this HTML skeleton:
“ <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> Front Content </div> <div class="flip-card-back"> Back Content </div> </div> </div> `
The outer div sets perspective. The inner div rotates. Front and back divs hold your content.
CSS Code for Horizontal Flip
This CSS creates the complete horizontal card flip effect:
` .flip-card { width: 300px; height: 200px; perspective: 1000px; }
.flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-card-back { transform: rotateY(180deg); } `
How to Trigger the Flip on Hover
The :hover selector on the parent triggers the transform on the inner container.
This creates smooth CSS hover effects without any JavaScript.
Transition duration controls flip speed. 0.6s feels natural; faster looks rushed, slower feels sluggish.
CSS Flip Card Examples by Flip Direction
Direction changes the feel completely.
Horizontal flips mimic turning a page. Vertical flips feel like lifting a panel. Diagonal adds drama.
Horizontal Flip Card (Left to Right)
The most common flip direction using rotateY:
` .flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-back { transform: rotateY(180deg); } `
Content rotates around the vertical axis, swinging left to right like a door.
Vertical Flip Card (Top to Bottom)
Swap rotateY for rotateX to flip vertically:
` .flip-card:hover .flip-card-inner { transform: rotateX(180deg); }
.flip-card-back { transform: rotateX(180deg); } `
The card tilts forward or backward, revealing the back like opening a laptop screen.
Diagonal Flip Card
Combine both rotation axes for a dramatic diagonal flip:
` .flip-card:hover .flip-card-inner { transform: rotateY(180deg) rotateX(20deg); }
.flip-card-back { transform: rotateY(180deg); } `
Use sparingly. It grabs attention but can feel disorienting with multiple cards.
CSS Flip Card Examples by Trigger Type
Hover works great on desktop but fails on touch devices.
Click triggers solve that problem. Focus triggers add keyboard accessibility.
Flip Card on Hover
Pure CSS solution with no scripting required:
` .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } `
Best for desktop interfaces where hover states are expected.
Flip Card on Click
JavaScript toggles a class to control the flip state:
` // JavaScript card.addEventListener('click', function() { this.classList.toggle('flipped'); });
/ CSS / .flip-card.flipped .flip-card-inner { transform: rotateY(180deg); } `
Works on both desktop and mobile. The card stays flipped until clicked again.
Flip Card on Focus
Adding focus support improves web accessibility for keyboard users:
` .flip-card:focus-within .flip-card-inner { transform: rotateY(180deg); } `
Add tabindex=”0″ to your card HTML. Users can now flip cards using Tab and Enter keys.
Consider adding ARIA labels to describe what happens when the card flips.
CSS Flip Card Examples for Common Use Cases
The flip mechanic fits naturally into several UI patterns.
Each use case needs slightly different styling on front and back faces.
Product Card with Flip Effect
Front shows the product image and title. Back reveals description, price, and call-to-action button.
` <div class="flip-card product"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="product.jpg" alt="Product"> <h3>Product Name</h3> </div> <div class="flip-card-back"> <p>Product description here.</p> <span class="price">$99</span> <button>Add to Cart</button> </div> </div> </div> `
Profile Card with Flip Animation
Team pages love this pattern. Photo and name on front; bio, role, and social links on back.
` .profile-front { background: linear-gradient(135deg, #667eea, #764ba2); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.profile-back { background: #1a1a2e; color: #fff; padding: 20px; } `
Pricing Card with CSS Flip
Show plan name and price upfront. Flip reveals the full feature list.
Works well in a grid system with three or four pricing tiers side by side.
Business Card with 3D Flip
Digital business cards use the flip to mimic a physical card. Logo and name on front; contact details, email, phone on back.
Add subtle CSS shadow effects to enhance the paper-like feel.
How to Make CSS Flip Cards Responsive
Fixed-width cards break on mobile screens.
Responsive design keeps your flip cards working across all viewport sizes.
Media Queries for Flip Cards
Adjust card dimensions and perspective at breakpoints using media queries:
` .flip-card { width: 100%; max-width: 300px; height: auto; aspect-ratio: 3/2; }
@media (max-width: 768px) { .flip-card { perspective: 800px; max-width: 100%; } } `
Use aspect-ratio instead of fixed height. Cards scale proportionally without distortion.
Touch-Friendly Flip Cards for Mobile
Hover doesn’t exist on touchscreens. Replace hover triggers with click/tap for mobile-first design.
` @media (hover: none) { .flip-card:active .flip-card-inner { transform: rotateY(180deg); } } `
Increase touch target size to at least 44×44 pixels. Meets accessibility guidelines and prevents mis-taps.
Common CSS Flip Card Problems and Fixes
Three issues cause 90% of flip card bugs.
All three have simple fixes once you know what’s wrong.
Why Is My Flip Card Flickering
Missing or incorrect backface-visibility causes flickering during rotation.
` .flip-card-front, .flip-card-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; } `
Include the webkit prefix for Safari and older Chrome versions.
Why Does My Flip Card Look Flat
No perspective on the parent container removes the 3D depth effect.
` .flip-card { perspective: 1000px; } `
Values between 800px and 1200px look most natural. Too low creates fisheye distortion.
Why Is Only One Side Showing
Missing transform-style: preserve-3d on the inner container flattens both faces together.
` .flip-card-inner { transform-style: preserve-3d; } `
Also verify the back face has transform: rotateY(180deg) applied in its default state.
Browser Support for CSS Flip Cards
D transforms work in all modern browsers.
Legacy browsers need vendor prefixes or graceful fallbacks.
Which Browsers Support CSS 3D Transforms
Full support in Chrome 36+, Firefox 16+, Safari 9+, Edge 12+.
Cross-browser compatibility is excellent for any project targeting modern users.
IE11 has partial support; complex 3D transforms may fail.
Vendor Prefixes for Older Browsers
Add webkit prefixes for older Safari and mobile browsers:
` .flip-card-inner { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: transform 0.6s; transition: transform 0.6s; }
.flip-card-front, .flip-card-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; } `
Use Autoprefixer in your build process to handle this automatically.
Test on actual devices when possible. Emulators miss rendering quirks in older mobile browsers.
FAQ on CSS Flip Cards Examples
What is a CSS flip card?
A CSS flip card is a two-sided UI component that rotates to reveal back content when triggered. It uses CSS3 transforms including rotateY, perspective, and backface-visibility to create the 3D flip animation effect.
How do I make a card flip on hover?
Apply transform: rotateY(180deg) to the inner container using the :hover pseudo-class on the parent. Add transition timing for smooth animation. The back face needs rotateY(180deg) in its default state.
Why is my flip card not showing the back?
Missing transform-style: preserve-3d on the inner container causes this. Without it, child elements flatten and lose their 3D positioning. Also verify backface-visibility is set to hidden on both faces.
Do CSS flip cards work on mobile?
Yes, but hover triggers fail on touchscreens. Use click events with JavaScript toggleClass instead. Add the hover: none media query to detect touch devices and switch trigger methods automatically.
What perspective value should I use?
Values between 800px and 1200px produce natural-looking flips. Lower values (300-500px) create exaggerated, dramatic rotations. Higher values flatten the effect. Apply perspective to the parent container, not the card itself.
How do I flip a card vertically instead of horizontally?
Replace rotateY with rotateX in your transform declarations. The card will flip top-to-bottom instead of left-to-right. Keep all other properties including perspective and preserve-3d unchanged.
Can I trigger the flip with a button click?
Yes. Use JavaScript to toggle a class on click, then target that class in CSS to apply the rotation. This approach works better for usability on touch devices and provides explicit user control.
Why does my flip card flicker during animation?
Flickering happens when backface-visibility: hidden is missing or lacks the webkit prefix. Add both the standard property and -webkit-backface-visibility: hidden to front and back face elements.
Are CSS flip cards accessible?
Basic flip cards need accessibility improvements. Add tabindex=”0″ for keyboard focus, use :focus-within as a trigger, and include ARIA labels describing the interaction. Screen readers should announce both sides.
How do I make responsive flip cards?
Use percentage widths or max-width with aspect-ratio instead of fixed height. Adjust perspective values in media queries for different screen sizes. Switch from hover to click triggers on mobile breakpoints.
Conclusion
CSS flip card examples demonstrate how simple transform properties create engaging card components without heavy scripting.
You now have working code for horizontal flips, vertical rotations, and click-triggered animations.
The core recipe stays the same: perspective on the parent, preserve-3d on the container, backface-visibility hidden on both faces.
Start with the basic hover effect. Then customize for your use case, whether that’s CSS cards for products, team profiles, or pricing tables.
Test on actual mobile devices. Swap hover triggers for click events where touch interactions matter.
Add accessible form elements or keyboard focus states if your cards contain interactive content.
The 3D card flip effect works across all modern browsers. Webkit prefixes handle edge cases in Safari.
Keep transitions between 0.4s and 0.8s for natural-feeling rotation. Grab a code snippet from above and build something users want to interact with.
