35+ Pure CSS Flip Cards (Free Code + Demos)
Enjoy this 100% free and open source collection of HTML and CSS flip card code examples. These pure CSS flip cards will enhance your website.
1. Fallout 76 CSS Slugger Perk Flip Card (CSS)
A CSS only (with a bit of native JS interaction) recreation of a Fallout 76 perk card. I saw the perk cards while checking out some videos. At first I thought the notch/bump in the corner would be interesting to recreate in CSS, however as I was building it I realised that there were lots ...Read More
Author: Jonno Witts (jonnowitts)
Links: Source Code / Demo, Www.w3.org
Created on: January 2, 2019
Made with: HTML, SCSS, JS
Tags: gaming, trading-card, fallout, pipboy, conic gradient
2. Card Flip
3D card flip effect with a 3d button
Author: Charles Ojukwu (cojdev)
Links: Source Code / Demo
Created on: February 8, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: card, flip, 3d
3. Pure CSS Flip Card
Pure CSS Flip Card
Author: Aron (Aoyue)
Links: Source Code / Demo
Created on: March 12, 2018
Made with: HTML, SCSS, JS
Tags: flip, pure-css, css, card, image
4. Tricky CSS Hover
Experimenting in 3d, VR inspired card layout feat. skateboarding theme
Author: Piotr Galor (pgalor)
Links: Source Code / Demo
Created on: July 19, 2018
Made with: HTML, CSS
Tags: card, animation, 3d, css, ui
5. Pure CSS Flip Card
Pure CSS Flip Card
Author: Aron (Aoyue)
Links: Source Code / Demo
Created on: March 12, 2018
Made with: HTML, SCSS, JS
Tags: flip, pure-css, css, card, image
6. Flipping CSS Card
Figure & Figcaption combo with some extra features in the form of a short description added on hover of the caption and the back side of the figure for a full description. Can be used in a portfolio to showcase both the work and an extensive description in a relatively small space.
Author: Alex Paul (alex_paul)
Links: Source Code / Demo
Created on: June 18, 2018
Made with: HTML, CSS, JS
Tags: codepenchallenge, cpc-figures, card, flip, lazy-loading
7. Lazy Loading Fig+Figcaption & Flipping Card
Figure & Figcaption combo with some extra features in the form of a short description added on hover of the caption and the back side of the figure for a full description. Can be used in a portfolio to showcase both the work and an extensive description in a relatively small space.
Author: Alex Paul (alex_paul)
Links: Source Code / Demo
Created on: June 18, 2018
Made with: HTML, CSS, JS
Tags: codepenchallenge, cpc-figures, card, flip, lazy-loading
8. FlippyCards
flippy cards!
Author: Kayleigh Foley (kayfo23)
Links: Source Code / Demo
Created on: March 28, 2018
Made with: HTML, SCSS
Tags: flipcard, flip, spin, cards
9. CSS 3D Flip Cards
Author: Welling Guzman (wellingguzman)
Links: Source Code / Demo
Created on: May 11, 2018
Made with: Pug, Less, JS
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Pug
10. 3D Product Cards
A project I used to learn a little bit more about using 3D CSS properties and some practice with more performant animated shadow effects. The little things that make me happy: - More performant box-shadow transitions. Box shadow is applied to :after and only the opacity is being animated....Read More
Author: Zac (Zacaree)
Links: Source Code / Demo, Tobiasahlin.com
Created on: December 18, 2017
Made with: HTML, Sass, Babel
Tags: 3d, flip, cards, hustler turf equipment, vanguard
11. 3D Flip Cards Pure CSS And HTML
Author: Arash Rasteh (ArashRasteh)
Links: Source Code / Demo
Created on: March 23, 2018
Made with: HTML, SCSS
12. Parallax Flipping Cards
Author: Nicolas Pavlotsky (tyrellrummage)
Links: Source Code / Demo
Created on: July 31, 2017
Made with: HTML, CSS
13. Parallax Card
Author: Hakkam Abdullah (Moslim)
Links: Source Code / Demo
Created on: August 15, 2017
Made with: HTML, CSS
Tags: parallax, flip-card, css3-animation, 3d animaition, hakkam
14. 3D Flipping Cards
Just a cute little card flipping demo. Not a game yet, but still nice to look. Hover over the cards to see what I mean!
Author: Rita Bradley (ritalbradley)
Links: Source Code / Demo
Created on: May 4, 2017
Made with: HTML, SCSS
Tags: css, star-wars, may the 4th
15. Element Card - Group 11 Element
Card UI with a simple 3D interaction
Author: Mario Duarte (MarioDesigns)
Links: Source Code / Demo
Created on: June 22, 2017
Made with: HTML, SCSS, Babel
Tags: ui, cards, css-animation, periodic-table, html5
16. Flipping Card
Author: Sergey Nikishkin (nikishkin)
Links: Source Code / Demo
Created on: December 19, 2016
Made with: HTML, CSS, JS
17. Ampersand Flash Card | Css Knockout Text + Flip Animation
I've been loving space-y images + knockout text + hand lettering lately and I've always been a fan of CSS animation, so here we are.
Author: Eina O (thelittleblacksmith)
Links: Source Code / Demo
Created on: March 16, 2017
Made with: HTML, CSS, JS
Tags: css, blend-mode, flip, animation
18. Realistic 3D Image Flip Box, Flip Card, 3d Image Hover, Kallyas WordPress Theme
Realistic 3D Image Flip Box Flip Card Kallyas WordPress Theme
Author: Nicola Mihaita (nicolamihaita)
Links: Source Code / Demo
Created on: October 26, 2016
Made with: HTML, CSS, JS
Tags: flip box, flip-card, hover, 3d, image
19. 3D Flip Business Card
gradient pattern based on pattern by Kakha Kakhadzen https://dribbble.com/shots/2908379-Pattern-for-Business-Cards
Author: Elena Nazarova (nazarelen)
Links: Source Code / Demo
Created on: August 22, 2016
Made with: HTML, CSS
20. Pure CSS Card Flip
A simple card flip effect using purely CSS.
Author: Eddy Sims (edeesims)
Links: Source Code / Demo
Created on: July 21, 2014
Made with: HTML, CSS
Tags: card-flip, animation, css, transitiond, 3d
21. Card Flip Animations - Pure CSS
Card flip animations - vertical and horizontal flips. Hover over the song cover to see more information on the back :)
Author: Julie Park (juliepark)
Links: Source Code / Demo
Created on: April 18, 2018
Made with: HTML, SCSS
Tags: album, card-flip, flip animations, css, cpc-cards
22. 3D Card Flip With Perspective
3D card flip with perspective
Author: Sampath Paravasthu (SampathParavasthu)
Links: Source Code / Demo
Created on: April 27, 2019
Made with: HTML, SCSS
Tags: card-flip, 3d-card-flip, 3d-flip-card
23. Day 14 - Near Miss
Day 14 gave me some trouble as I didn't get the card flipping mechanism, but now it's as simple as a card flip, or something like that.
Author: Ethan (dotEthan)
Links: Source Code / Demo
Created on: August 7, 2018
Made with: HTML, SCSS
Tags: css, 100 days of css, card-flip, css-animation
24. CSS Only Card Flip
Simple demo of card flip functionality in pure CSS
Author: Ian Svoboda (iansvo)
Links: Source Code / Demo
Created on: December 26, 2016
Made with: HTML, SCSS
Tags: css-only, css, card-flip, animation
25. Card Flip CSS Animation
Make cards with information on the back. Can also be triggered on hover
Author: TJ Egan (tjegan)
Links: Source Code / Demo
Created on: February 8, 2016
Made with: HTML, SCSS, JS
Tags: animation, css, card-flip, flip-animation, backface visibility
26. Animated Card / Flip On Hover /CSS
Animated card design that flips on hover to reveal more information.
Author: James Gillen (james_gillen)
Links: Source Code / Demo
Created on: October 16, 2015
Made with: HTML, SCSS
Tags: animation, css, cssonly, cardflip
27. Card Flip Reflection
Inspired by https://www.youtube.com/watch?v=ds8ymUkqvmo&t=3s -webkit-box-reflect is awesome.
Author: alphardex (alphardex)
Links: Source Code / Demo
Created on: December 17, 2019
Made with: HTML, SCSS
Tags: card, hover, flip, reflection, 3d
28. Teach CSS - Card Flip
Learn how to create a card flip animation using CSS!
Author: Ben (benrobyg)
Links: Source Code / Demo
Created on: August 13, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: codepenchallenge, cpc-teach-css, backface, css, card-flip
29. Card Flip Animation
Playing around with a hover transition/effect
Author: Adam Bottega (abottega)
Links: Source Code / Demo
Created on: March 4, 2015
Made with: HTML, CSS
Tags: hover, card-flip, animation
30. Simple Card Flip
A SCSS function and HTML format for doing a card flip. Lightweight, easy to use, direction and speed supported. The design on the front and back of the card can be anything.
Author: Matthew Willox (mwmwmw)
Links: Source Code / Demo
Created on: August 2, 2015
Made with: HTML, SCSS, JS
Tags: card-flip, flip, scss-function, plug and play
More Awesome Lists:
Share: