CSS Flip Cards

In this article, we listed the hand-picked awesome flipping cards developed using CSS, html, JavaScript, jQuery, AngularJs, VueJs, ReactJs, etc. Listed tutorials well played with 3d, gradients, etc. some of the flip cards are having beautiful animation effects using transitions. Demo and download available on each tutorial. Flip cards can be used directly without any changes and could be small changes based on your needs.

Article will be helpful for designers and non-coders.

Comment your favorite flip card(s) or comment the card(s) which you admired from external resource.

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
Created:
AUGUST 03, 2016
Made with:
HTML, CSS and JavaScript
Demo Image: 3d flexbox flippable card with shiny
cards, css cards, flip cards, 3d flip, flippable card

Journalist Flip Card

Animated Press Card

Author:
Anders Schmidt Hansen
Created:
AUGUST 14, 2013
Made with:
HTML, CSS and JavaScript
Demo Image: Journalist Flip Card
flip animation, cards, css cards, flip cards, Journalist cards

Flip - card memory game

The game will save your stats locally, via localStorage.

Author:
Codrin Pavel
Created:
JANUARY 17, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: Flip - card memory game.
flip animation, cards, css cards, flip cards, game cards

Simple card flip effect using Anime.js

A Simple card flip effect using Anime.js

Author:
Marcos Paulo
Created:
JANUARY 09, 2018
Made with:
HTML, CSS and JavaScript
Demo Image: Simple card flip effect using Anime.js
Animation, cards, css cards, flip cards, animation cards, Anime.js

Business Card and flip effects

Business Card

Author:
Nicholas Dobie
Created:
JULY 21, 2014
Made with:
HTML, CSS
Demo Image: Business Card and flip effects
Animation, flip animation, cards, css cards, flip cards, Business Card

3d effect Business Card

This is an online version of the business card.

Author:
Lubos
Created:
AUGUST 16, 2016
Made with:
HTML, CSS and JavaScript
Demo Image: 3d effect Business Card
Animation, flip animation, cards, css cards, 3d effects, flip cards, 3d flip

Makeup Palettes with flip effects

Using grid inside flex, instead of the other way around

Author:
Olivia
Created:
DECEMBER 23, 2018
Made with:
HTML, CSS
Demo Image: CSS Grid: Makeup Palettes with flip effects
Animation, flip animation, cards, css cards, flip cards, Vertical Flip

Music player with hidden controls

Hover/Click on album cover to show controls.

Author:
Dario Fuzinato
Created:
DECEMBER 16, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: Music player with hidden controls
hover animation, flip animation, cards, Hover effects, mouse hover effects, css hover effects, css cards, music players, flip cards

Pure CSS clickable flip cards

Pure CSS clickable flip cards using only css

Author:
Kacper Parzęcki
Created:
SEPTEMBER 25, 2018
Made with:
HTML, CSS
Demo Image: Pure CSS clickable flip cards
click animation, flip animation, cards, css cards, click effects, flip cards

CSS Flip Card (content with JS)

Rotation effect with only CSS using transform, and HTML content created with JSON.

Author:
Diego Bruno Rodrigues
Created:
OCTOBER 26, 2016
Made with:
HTML, CSS and JavaScript
Demo Image: CSS Flip Card (content with JS)
hover animation, flip animation, cards, Hover effects, mouse hover effects, css hover effects, css cards, flip cards

Card Flip Jquery

Flip Cards using Jquery

Author:
bycreator
Created:
FEBRUARY 16, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: Card Flip Jquery
jquery, click animation, flip animation, cards, css cards, click effects, flip cards

CSS Business Card

The physical world is so last year. Save the trees with a digital business card.

Author:
Keith Pickering
Created:
FEBRUARY 01, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: CSS Business Card
click animation, flip animation, cards, css cards, click effects, flip cards

Simple flip card CSS

Simple profile flip card using CSS

Author:
Thomas Podgrodzki
Created:
OCTOBER 12, 2015
Made with:
HTML, CSS
Demo Image: Simple flip card CSS
hover animation, flip animation, cards, Hover effects, mouse hover effects, css hover effects, css cards, flip cards, simple cards

Bootstrap 4 - Flip cards

Flip cards using Bootstrap 4

Author:
Chrisbo246
Created:
FEBRUARY 09, 2017
Made with:
HTML, CSS and JavaScript
Demo Image: Bootstrap 4 - Flip cards
bootstrap, hover animation, flip animation, cards, Hover effects, mouse hover effects, css hover effects, css cards, flip cards

Card Flipping AngularJS

Card Flipping AngularJS

Author:
Zachary Beyer
Created:
JULY 30, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: Flipping Card (AngularJS)
click animation, flip animation, cards, css cards, click effects, flip cards

React - Flip Cards Design

React - Flip Cards Design for actors

Author:
Adam
Created:
MAY 11, 2018
Made with:
HTML, CSS and JavaScript
Demo Image: React - Flip Cards Design
hover animation, flip animation, cards, Hover effects, mouse hover effects, css hover effects, css cards, flip cards

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
Created:
MAY 04, 2017
Made with:
HTML, CSS
Demo Image: 3D Flipping Cards
hover animation, flip animation, cards, Hover effects, mouse hover effects, css hover effects, css cards, flip cards

Player Flip Cards

A simple css only flip cards.

Author:
Nick Nikolov
Created:
MARCH 06, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: Player Flip Cards
hover animation, flip animation, cards, Hover effects, mouse hover effects, css hover effects, css cards, flip cards

Google Now Inspired Flip Cards

Google Now style info cards with CSS card flip animation.

Author:
Ettrics
Created:
MARCH 17, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: Google Now Inspired Flip Cards
google, click animation, flip animation, cards, css cards, click effects, flip cards

Social Flip Cards

Messing around with 3d transforms and delayed transitions.

Author:
Charlotte Dann
Created:
AUGUST 05, 2012
Made with:
HTML, CSS
Demo Image: Social Flip Cards
social, hover animation, flip animation, cards, Hover effects, mouse hover effects, css hover effects, css cards, social icons, social buttons, social share buttons, flip cards

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
Created:
SEPTEMBER 18, 2015
Made with:
HTML, CSS
Demo Image: Style Flip-card Menu
hover animation, flip animation, cards, Hover effects, mouse hover effects, css hover effects, css cards, flip cards

Realistic 3D Image Flip Box, Flip Card, 3d Image hover

Realistic 3D Image Flip Box Flip Card Kallyas

Author:
Nicola Mihaita
Created:
OCTOBER 26, 2016
Made with:
HTML, CSS and JavaScript
Demo Image: Realistic 3D Image Flip Box, Flip Card, 3d Image hover
hover animation, flip animation, cards, Hover effects, mouse hover effects, css hover effects, css cards, flip cards, 3d flip

Half flip cards 3d

Responsive half flip card with 3d transform on bootstrap grid.

Author:
David Foliti
Created:
SEPTEMBER 27, 2016
Made with:
HTML, CSS and JavaScript
Demo Image: Half flip cards 3d
hover animation, click animation, flip animation, cards, Hover effects, mouse hover effects, css hover effects, css cards, click effects, flip cards, Half flip

React - Flip Cards

Responsive Flip Card display

Author:
Thomas Herman
Created:
SEPTEMBER 27, 2016
Made with:
HTML, CSS and JavaScript
Demo Image: React - Flip Cards
click animation, flip animation, cards, css cards, click effects, flip cards

Bulma + Vuejs Flip Card

credit : bulma, vuejs, devices.css, chancejs, css-flip

Author:
Dzulfikar Adi Putra
Created:
OCTOBER 18, 2016
Made with:
HTML, CSS and JavaScript
Demo Image: Bulma + Vuejs Flip Card
VueJS, flip animation, cards, css cards, flip cards

Flipping card UI

Flipping card UI

Author:
mario s maselli
Created:
JULY 03, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: Flipping card UI
click animation, flip animation, cards, css cards, flip cards

React Flipping Card with Tutorial

Learn How to Create Quick and Simple React Flipping Card tutorial

Author:
Alex Devero
Created:
JANUARY 09, 2017
Made with:
HTML, CSS and JavaScript
Demo Image: React Flipping Card with Tutorial
ReactJS, hover animation, flip animation, cards, Hover effects, mouse hover effects, css hover effects, css cards, flip cards

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
Created:
MARCH 10, 2017
Made with:
HTML, CSS and JavaScript
Demo Image: Cross-Browser Flip Card
hover animation, flip animation, cards, Hover effects, mouse hover effects, css hover effects, css cards, flip cards

Flipping Cards

Horizontal flipping cards on CSS

Author:
Nicola Markelov
Created:
OCTOBER 13, 2015
Made with:
HTML, CSS
Demo Image: Flipping Cards
hover animation, flip animation, cards, Hover effects, mouse hover effects, css hover effects, flip cards, Horizontal Flip

Pure CSS Flip Card

Pure CSS Flip Card

Author:
Aron
Created:
MARCH 12, 2018
Made with:
HTML, CSS
Demo Image: Pure CSS Flip Card
hover animation, flip animation, cards, Hover effects, mouse hover effects, css hover effects, css cards, flip cards, Horizontal Flip, Vertical Flip

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
Created:
NOVEMBER 02, 2012
Made with:
HTML, CSS and JavaScript
Demo Image: 3D Profile Flip Card
click animation, flip animation, cards, css cards, flip cards

3D Flip Card Effect

3D flip cards implemented with CSS3

Author:
Samet Erpik
Created:
AUGUST 23, 2014
Made with:
HTML, CSS and JavaScript
Demo Image: 3D Flip Card Effect
click animation, flip animation, cards, css cards, flip cards

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
Created:
DECEMBER 11, 2012
Made with:
HTML, CSS
Demo Image: Multi Flip Cards
flip animation, cards, css cards, flip cards

Advertisement

Google Matched Content...