Home / 3D and Depth / Flip Cards
Flip Cards CSS Template, Free with Live Demo
Free 3D flip card template for a language app. Click or press Enter to flip a flashcard and see the answer on the back, with a progress bar. Live demo. The example is Palabra, a Spanish flashcard app.
What is flip cards?
Flip cards have a front and a back, and turn over in 3D when you click them. They are perfect for flashcards, team profiles and product details.
Both faces sit on top of each other with backface-visibility: hidden, and the back starts turned 180 degrees. Flipping the inner wrapper shows one face and hides the other. The cards are real buttons, so they work with the keyboard.
Good for
- Flashcards and quizzes
- Team and people cards
- Product features with details
- Games and memory puzzles
What you get in this template
- Smooth 3D flip with a small bounce
- Real buttons with aria-pressed
- Works with click, tap, Enter and Space
- Progress bar counts cards you have seen
- Front and back use lang for correct pronunciation
The key CSS
This is the part that makes the flip cards look work. Copy it into your own project.
.deck { perspective: 1000px; }
.in { transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, 1.3, .6, 1); }
.fc[aria-pressed="true"] .in { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; }
.back { transform: rotateY(180deg); }How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
How do you make a flip card in CSS?
Stack two faces inside a wrapper with preserve-3d, hide their backs with backface-visibility: hidden, rotate the back face 180deg, then rotate the wrapper 180deg to flip.
Should flip cards use hover or click?
Click is better. Hover does not work on phones and can flip by accident. This template uses buttons.
Are flip cards accessible?
Yes, when they are buttons with aria-pressed and the back text is announced, as in this template.
More 3D and Depth designs
071. 3D Tilt Cards
Postcard Club, a postcard subscription
072. Isometric
Stackyard, a fulfillment warehouse
073. Layered Shadows
Forma, a furniture maker
074. Floating Elements
Driftwood, a to-do app
075. Perspective Scroll
Fieldnote, a year in review page
077. 3D Product Box
Kettle Lane, a tea brand
078. Spatial UI
Habitat, a spatial meeting workspace
079. Depth Blur
Terraza, a family winery