Summarize this article with:
Flat cards are boring. CSS flip card examples show you how to add depth and interactivity with nothing but a few lines of code.
These 3D card effects work on product displays, team profiles, pricing tables, and portfolio showcases. Users hover or click, the card rotates, hidden content appears.
No heavy frameworks needed. Just pure CSS transforms and a simple HTML structure.
This guide covers everything from basic flip card animation to advanced techniques. You’ll get working code for horizontal flips, vertical flips, hover triggers, and click interactions.
Plus fixes for common problems like Safari glitches and mobile compatibility issues.
What is a CSS Flip Card
A CSS flip card is a two-sided interactive element that rotates to reveal hidden content.
The front face displays initial information. Hover or click triggers a 3D transform that flips the card 180 degrees, exposing the back face.
Built entirely with CSS and HTML, these components need zero JavaScript for basic functionality.
Common uses include profile cards, pricing displays, product showcases, and memory card games.
The flip animation creates depth through CSS3 transform properties, making flat elements feel tangible and clickable.
CSS Flip Card Examples To Check Out
3D Flip Business Card with a Twist
See the Pen
3D flip business card by Elena Nazarova (@nazarelen)
on CodePen.
Apple’s Gift Card, but Flippier
Affordable and Fancy – Pricing Cards
Flippy Cards Being… Flippy
Make Payments Stylish with Credit Card Animations
Galactic Interactivity with Responsive Cards
Show Off with a 3D Product Card
DIY Flipping Cards in 3D
Day One with a Toggle Flipping Mechanism
Flip with the Magic of HTML5 and CSS3
Dive into the Fallout 76 Card
Stellar Parallax Card
Play with Animated Flipping, Just Hover!
Enter the 3D Realm with Tricky CSS
Element Card – Click and Unfold
Reflective Flipping Magic
Realistic 3D Image Flip Card
Card Flip
Flip Card animation Login Screen
Parallax Flipping Cards
Pure CSS Card Flip
Flipping CSS Card
Ampersand Flash Card
UI – Flip Card
Valentine’s day
Card Flip Animations – Pure CSS
CSS Flip Card Hover Effect
Responsive Flip Pricing Table
Card Flip CSS Animation
Flip on Click
CSS Card Flip By Cole Bemis
Batman SVG 3D flip card
CSS Animation Card Flip
Simple Card Flip
3D Flip Cards (CSS only)
3D Flip Cards Pure CSS and HTML
Google Now Inspired Flip Cards
How Does a CSS Flip Card Work
The flip effect relies on three CSS properties working together: transform, perspective, and backface-visibility.
A container holds two absolutely positioned elements stacked on top of each other. One faces forward, the other is pre-rotated 180 degrees backward.
When triggered, the parent rotates along the Y-axis (horizontal flip) or X-axis (vertical flip). The backface-visibility property hides whichever face points away from the viewer.
The Role of CSS Transform Property
Transform handles the actual rotation using rotateY(180deg) or rotateX(180deg).
This property manipulates elements in 2D and 3D space without affecting document flow.
The Role of Backface Visibility
Setting backface-visibility: hidden prevents the reversed content from showing through during rotation.
Without it, you’d see mirrored text bleeding through the card face. Safari requires the -webkit- prefix for full cross-browser compatibility.
The Role of Perspective in 3D Space
CSS perspective creates the illusion of depth by defining how far the viewer sits from the 3D plane.
Lower values (300-500px) produce dramatic, exaggerated rotations. Higher values (800-1200px) create subtle, realistic flips.
Apply perspective to the parent container, not the rotating element itself.
Core CSS Properties for Flip Card Animation
Five properties form the foundation of every flip card effect. Master these and you can build any variation.
Transform-Style Preserve-3D
This property tells child elements to exist in true 3D space rather than being flattened.
Set transform-style: preserve-3d on the inner wrapper that contains both card faces.
Transition Timing and Duration
The transition property controls animation smoothness. Standard duration ranges from 0.5s to 0.8s.
Use ease-in-out for natural movement, ease for quick starts, or cubic-bezier() for custom curves.
Rotation Along X and Y Axis
rotateY() flips horizontally like a door swinging open. rotateX() flips vertically like a garage door.
Combine both with CSS animation for diagonal or multi-axis rotations.
HTML Structure for CSS Flip Cards
The markup follows a consistent three-layer pattern: container, inner wrapper, and two face elements.
Container Element Setup
The outer <div> defines dimensions and holds the perspective value. It stays static during animation.
“ <div class="flip-card"> <!-- Inner wrapper and faces go here --> </div> `
Front Face Markup
The front face displays default visible content. Position it absolutely within the inner wrapper.
` <div class="flip-card-front"> <h3>Card Title</h3> <p>Visible content here</p> </div> `
Back Face Markup
The back face contains hidden content revealed after rotation. Pre-rotate it 180 degrees in your stylesheet.
` <div class="flip-card-back"> <p>Hidden details</p> <a href="#">Learn More</a> </div> `
Basic CSS Flip Card Example
Here’s a complete working example combining everything covered above.
Copy this code directly into your project. Modify colors, dimensions, and content to match your user interface design.
` <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <h3>Front Side</h3> </div> <div class="flip-card-back"> <p>Back Content</p> </div> </div> </div> `
` .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-front { background: #2980b9; color: white; }
.flip-card-back { background: #27ae60; color: white; transform: rotateY(180deg); } `
The perspective: 1000px value provides a balanced 3D effect. Adjust based on card size and desired intensity.
Test in Chrome, Firefox, Safari, and Edge before deploying. The webkit prefix on backface-visibility handles older Safari versions.
CSS Flip Card on Hover
The hover trigger is the most common flip card interaction. Pure CSS, no scripts required.
Target the inner wrapper’s transform when the parent receives hover state.
` .flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-inner { transition: transform 0.6s ease-in-out; transform-style: preserve-3d; } `
Works great on desktop. Touch devices need a different approach since hover states behave unpredictably on mobile.
Add CSS hover effects like subtle shadows or scale transforms to signal interactivity before the flip occurs.
CSS Flip Card on Click
Click-triggered flips require minimal JavaScript to toggle a class. Better for mobile user experience.
` const card = document.querySelector('.flip-card-inner');
document.querySelector(‘.flip-card’).addEventListener(‘click’, () => { card.classList.toggle(‘flipped’); }); `
` .flip-card-inner.flipped { transform: rotateY(180deg); } `
The CSS stays identical to the hover version. Only the trigger mechanism changes.
Click events work consistently across all devices and browsers. Users can also flip the card back by clicking again.
Vertical CSS Flip Card Example
Vertical flips rotate along the X-axis, moving top-to-bottom like a calendar page.
` .flip-card:hover .flip-card-inner { transform: rotateX(180deg); }
.flip-card-back { transform: rotateX(180deg); } `
Change rotateY to rotateX on both the hover state and the back face's default position.
Vertical flips feel natural for content stacked in rows. Horizontal flips suit side-by-side CSS cards layouts better.
Horizontal CSS Flip Card Example
Horizontal rotation uses rotateY(180deg), flipping left-to-right like turning a book page.
` .flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-back { transform: rotateY(180deg); } `
This is the default flip direction used in most tutorials and frameworks.
Combine with CSS card hover effects like elevation changes or border glows for added polish.
Responsive CSS Flip Card
Fixed pixel dimensions break on smaller screens. Use relative units and media queries for fluid layouts.
Media Query Considerations
Adjust card dimensions at breakpoints. Stack cards vertically on mobile, grid layout on desktop.
` .flip-card { width: 100%; max-width: 300px; height: auto; aspect-ratio: 3/2; }
@media (max-width: 768px) { .flip-card { max-width: 100%; } } `
Touch Device Compatibility
Replace hover triggers with click/tap events for mobile-first design.
Use @media (hover: hover) to detect devices that support true hover states, then serve appropriate interactions.
Common CSS Flip Card Problems
Three issues appear constantly in flip card implementations. Here’s how to fix each one.
Flickering During Animation
Flickering usually means missing transform-style: preserve-3d on the inner wrapper or conflicting z-index values.
Add -webkit-transform-style: preserve-3d for older WebKit browsers.
Backface Visibility Not Working in Safari
Safari requires the webkit prefix. Always include both declarations.
` backface-visibility: hidden; -webkit-backface-visibility: hidden; `
Also verify transform-style: preserve-3d exists on parent elements. Safari flattens 3D context more aggressively than Chrome or Firefox.
Z-Index Stacking Issues
Cards overlapping wrong during animation? Set explicit z-index on front and back faces.
` .flip-card-front { z-index: 2; }
.flip-card-back { z-index: 1; } `
Creating a new stacking context with position: relative on the container also helps isolate flip cards from surrounding elements.
Browser Support for CSS Flip Cards
Modern browser support is excellent. Chrome, Firefox, Edge, and Safari all handle 3D transforms without issues.
Potential problems exist only in:
- Internet Explorer 11 (partial support, no preserve-3d)
- Opera Mini (no 3D transforms)
- Older Android browsers (pre-2019)
Check web accessibility requirements. Screen readers ignore visual flip states, so ensure both card faces contain meaningful content independently.
Test on real devices when possible. Emulators miss subtle rendering differences, especially for perspective and backface-visibility edge cases.
For legacy browser fallback, detect support with @supports (transform-style: preserve-3d) and provide a simple show/hide alternative.
FAQ on CSS Flip Cards
How do I create a flip card with pure CSS?
Build a container with perspective, an inner wrapper with transform-style: preserve-3d, and two face elements using backface-visibility: hidden.
Apply rotateY(180deg) on hover to trigger the 3D flip effect.
Why is my CSS flip card not working?
Missing transform-style: preserve-3d on the inner wrapper is the usual culprit.
Also check that both card faces have position: absolute and backface-visibility: hidden declared.
How do I make a flip card work on mobile devices?
Replace hover triggers with click events using minimal JavaScript.
Toggle a .flipped class on tap. Hover states behave inconsistently on touch screens, making click-based interactions more reliable for responsive design.
What is the best perspective value for flip cards?
Values between 800px and 1200px produce natural-looking rotations.
Lower values create dramatic, exaggerated depth. Higher values flatten the 3D effect. Test different settings based on your card dimensions.
How do I flip a card vertically instead of horizontally?
Change rotateY(180deg) to rotateX(180deg) on both the hover state and the back face's default transform.
Vertical flips rotate top-to-bottom along the X-axis.
Why does backface-visibility not work in Safari?
Safari requires the webkit prefix. Include both backface-visibility: hidden and -webkit-backface-visibility: hidden in your stylesheet.
Also ensure parent elements maintain the 3D context with preserve-3d.
Can I add multiple flip cards in a grid layout?
Yes. Wrap cards in a container using CSS grid or flexbox.
Each flip card operates independently. Set consistent widths and use gap for spacing between cards.
How do I control flip card animation speed?
Adjust the transition duration on the inner wrapper. Standard values range from 0.5s to 0.8s.
Use ease-in-out for smooth acceleration or cubic-bezier() for custom timing curves.
Why is my flip card flickering during animation?
Flickering occurs when z-index conflicts or missing preserve-3d breaks the 3D stacking context.
Set explicit z-index values on front and back faces. Add webkit prefixes for older browsers.
Do CSS flip cards work without JavaScript?
Yes. Basic hover-triggered flip cards need only CSS.
JavaScript becomes necessary for click events, accessibility enhancements, or dynamic content loading on the back face.
Conclusion
These CSS flip card examples give you everything needed to build polished card flip animations from scratch.
You’ve learned the core properties: transform, perspective, backface-visibility, and preserve-3d. You’ve seen horizontal and vertical rotations in action.
The troubleshooting section handles Safari quirks and flickering issues that trip up most developers.
Start with the basic example. Get it working first. Then experiment with CSS keyframes for more complex sequences or add micro-interactions like scale transforms on hover.
Flip cards work great for team profiles, product card designs, testimonials, and pricing tables.
Copy the code. Modify the styles. Ship something today.
