Hand-picked HTML and CSS code examples, tutorials and articles
CSS Gallery, jQuery plugins

CSS Flip Cards

34 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.

Vertical Flipping Business Card

Interactive card design with text clip-mask + background-clip linear-gradient animation.

Author:
Sabine Robart
Created:
OCTOBER 31, 2018
Made with:
HTML, CSS
Demo Image: Vertical Flipping Business Card

Animated Business Card

Animated Business Card with flip effect

Author:
Laura Pinto
Created:
JANUARY 18, 2019
Made with:
HTML, CSS
Demo Image: Animated Business Card

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

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 - 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.

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

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

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

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

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

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)

Card Flip Jquery

Flip Cards using Jquery

Author:
bycreator
Created:
FEBRUARY 16, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: Card Flip Jquery

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

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

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

Card Flipping AngularJS

Card Flipping AngularJS

Author:
Zachary Beyer
Created:
JULY 30, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: Flipping Card (AngularJS)

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

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

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

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

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

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

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

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

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

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

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

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

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

Flipping Cards

Horizontal flipping cards on CSS

Author:
Nicola Markelov
Created:
OCTOBER 13, 2015
Made with:
HTML, CSS
Demo Image: Flipping Cards

Pure CSS Flip Card

Pure CSS Flip Card

Author:
Aron
Created:
MARCH 12, 2018
Made with:
HTML, CSS
Demo Image: Pure CSS Flip Card

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

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

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

Advertisement