In this article, we listed the hand-picked awesome flipping cards developed using CSS, HTML, JavaScript, jQuery, AngularJs, VueJs, ReactJs, etc. The listed tutorials well play with 3d, gradients, etc. Some of the flip cards have beautiful animation effects using transitions. Demos and downloads are available for each tutorial. Flip cards can be used directly without any changes, and there could be small changes based on your needs.
This article will be helpful for designers and non-coders.
Comment on your favorite flip card(s) or the card(s) you admire from an external resource.
Related Articles:
Vertical Flipping Business Card
Interactive card design with text clip-mask + background-clip linear-gradient animation.
Author: Sabine Robart · Made with: HTML, CSS · Created: OCTOBER 31, 2018
Animated Business Card
Animated Business Card with flip effect
Author: Laura Pinto · Made with: HTML, CSS · Created: JANUARY 18, 2019
3d flexbox flippable card with shiny
Based on the real sizes of a standard business card, but it flips with shine. Needs more shadow!
Author: Adam Crockett · Made with: HTML, CSS and JavaScript · Created: AUGUST 03, 2016
Journalist Flip Card
Animated Press Card
Author: Anders Schmidt Hansen · Made with: HTML, CSS and JavaScript · Created: AUGUST 14, 2013
Flip – card memory game
The game will save your stats locally, via localStorage.
Author: Codrin Pavel · Made with: HTML, CSS and JavaScript · Created: JANUARY 17, 2015
Simple card flip effect using Anime.js
A Simple card flip effect using Anime.js
Author: Marcos Paulo · Made with: HTML, CSS and JavaScript · Created: JANUARY 09, 2018
Business Card and flip effects
Business Card
Author: Nicholas Dobie · Made with: HTML, CSS · Created: JULY 21, 2014
3d effect Business Card
This is an online version of the business card.
Author: Lubos · Made with: HTML, CSS and JavaScript · Created: AUGUST 16, 2016
Makeup Palettes with flip effects
Using grid inside flex, instead of the other way around
Author: Olivia · Made with: HTML, CSS · Created: DECEMBER 23, 2018
Pure CSS clickable flip cards
Pure CSS clickable flip cards using only css
Author: Kacper Parzęcki · Made with: HTML, CSS · Created: SEPTEMBER 25, 2018
CSS Flip Card (content with JS)
Rotation effect with only CSS using transform, and HTML content created with JSON.
Author: Diego Bruno Rodrigues · Made with: HTML, CSS and JavaScript · Created: OCTOBER 26, 2016
Card Flip Jquery
Flip Cards using Jquery
Author: bycreator · Made with: HTML, CSS and JavaScript · Created: FEBRUARY 16, 2015
CSS Business Card
The physical world is so last year. Save the trees with a digital business card.
Author: Keith Pickering · Made with: HTML, CSS and JavaScript · Created: FEBRUARY 01, 2015
Simple flip card CSS
Simple profile flip card using CSS
Author: Thomas Podgrodzki · Made with: HTML, CSS · Created: OCTOBER 12, 2015
Bootstrap 4 – Flip cards
Flip cards using Bootstrap 4
Author: Chrisbo246 · Made with: HTML, CSS and JavaScript · Created: FEBRUARY 09, 2017
Card Flipping AngularJS
Card Flipping AngularJS
Author: Zachary Beyer · Made with: HTML, CSS and JavaScript · Created: JULY 30, 2015
React – Flip Cards Design
React – Flip Cards Design for actors
Author: Adam · Made with: HTML, CSS and JavaScript · Created: MAY 11, 2018
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 · Made with: HTML, CSS · Created: MAY 04, 2017
Player Flip Cards
A simple css only flip cards.
Author: Nick Nikolov · Made with: HTML, CSS and JavaScript · Created: MARCH 06, 2015
Google Now Inspired Flip Cards
Google Now style info cards with CSS card flip animation.
Author: Ettrics · Made with: HTML, CSS and JavaScript · Created: MARCH 17, 2015
Social Flip Cards
Messing around with 3d transforms and delayed transitions.
Author: Charlotte Dann · Made with: HTML, CSS · Created: AUGUST 05, 2012
Style Flip-card Menu
This uses the Foundation framework for much of the style, and has a pure CSS flip-card menu.
Author: Aaron Snowberger · Made with: HTML, CSS · Created: SEPTEMBER 18, 2015
Realistic 3D Image Flip Box, Flip Card, 3d Image hover
Realistic 3D Image Flip Box Flip Card Kallyas
Author: Nicola Mihaita · Made with: HTML, CSS and JavaScript · Created: OCTOBER 26, 2016
Half flip cards 3d
Responsive half flip card with 3d transform on bootstrap grid.
Author: David Foliti · Made with: HTML, CSS and JavaScript · Created: SEPTEMBER 27, 2016
React – Flip Cards
Responsive Flip Card display
Author: Thomas Herman · Made with: HTML, CSS and JavaScript · Created: SEPTEMBER 27, 2016
Bulma + Vuejs Flip Card
credit : bulma, vuejs, devices.css, chancejs, css-flip
Author: Dzulfikar Adi Putra · Made with: HTML, CSS and JavaScript · Created: OCTOBER 18, 2016
Flipping card UI
Flipping card UI
Author: mario s maselli · Made with: HTML, CSS and JavaScript · Created: JULY 03, 2015
React Flipping Card with Tutorial
Learn How to Create Quick and Simple React Flipping Card tutorial
Author: Alex Devero · Made with: HTML, CSS and JavaScript · Created: JANUARY 09, 2017
Cross-Browser Flip Card
A GSAP powered cross-browser 3D flip card sample. Basically it uses two different elements that are animated at the same time to create the flip card, without using preserve-3d which is not supported by IE.
Author: Rodrigo Hernando · Made with: HTML, CSS and JavaScript · Created: MARCH 10, 2017
Flipping Cards
Horizontal flipping cards on CSS
Author: Nicola Markelov · Made with: HTML, CSS · Created: OCTOBER 13, 2015
Pure CSS Flip Card
Pure CSS Flip Card
Author: Aron · Made with: HTML, CSS · Created: MARCH 12, 2018
3D Profile Flip Card
These are 3D Profile Flip Cards. Click the i to flip the card. The concept started out as a hover event, but that proved challenging on a mobile device, so I opted to use a bit of js to change out classes on click/touch. There are a variety of flip options, Y, X and Diagonal
Author: Nick Hempsey · Made with: HTML, CSS and JavaScript · Created: NOVEMBER 02, 2012
3D Flip Card Effect
3D flip cards implemented with CSS3
Author: Samet Erpik · Made with: HTML, CSS and JavaScript · Created: AUGUST 23, 2014
Multi Flip Cards
My goal was to create re-useable card-like elements that flip on hover (or tap!). I’ve built markup for a flippable card that you can use to hold any content you want on the front or the back of the card. Simply set the size of the containing .flip-card element and put whatever you want into .front and .back and style accordingly. It gracefully degrades too: Webkit: Cards flip with a 3D effect Firefox & IE10: Cards flip but no 3d effect IE9 and down: Back instantly appears on hover
Author: Andy McFee · Made with: HTML, CSS · Created: DECEMBER 11, 2012
