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.
NEW
🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉
Click to visit: ApplyFox.ai
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
NEW
🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉
Click to visit: ApplyFox.ai
More Awesome Lists:
Share: