Home / Frontend Codes and Demos / Essentials / Cards / 34 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.

1) Vertical Flipping Business Card

Demo Image: 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

2) Animated Business Card

Demo Image: Animated Business Card

Animated Business Card with flip effect

Author:
Laura Pinto
Created:
JANUARY 18, 2019
Made with:
HTML, CSS

3) 3d flexbox flippable card with shiny

Demo Image: 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

4) Journalist Flip Card

Demo Image: Journalist Flip Card

Animated Press Card

Author:
Anders Schmidt Hansen
Created:
AUGUST 14, 2013
Made with:
HTML, CSS and JavaScript

5) Flip – card memory game

Demo Image: 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

6) Simple card flip effect using Anime.js

Demo Image: 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

7) Business Card and flip effects

Demo Image: Business Card and flip effects

Business Card

Author:
Nicholas Dobie
Created:
JULY 21, 2014
Made with:
HTML, CSS

8) 3d effect Business Card

Demo Image: 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

9) Makeup Palettes with flip effects

Demo Image: CSS Grid: 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

10) Pure CSS clickable flip cards

Demo Image: 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

11) CSS Flip Card (content with JS)

Demo Image: 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

12) Card Flip Jquery

Demo Image: Card Flip Jquery

Flip Cards using Jquery

Author:
bycreator
Created:
FEBRUARY 16, 2015
Made with:
HTML, CSS and JavaScript

13) CSS Business Card

Demo Image: 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

14) Simple flip card CSS

Demo Image: Simple flip card CSS

Simple profile flip card using CSS

Author:
Thomas Podgrodzki
Created:
OCTOBER 12, 2015
Made with:
HTML, CSS

15) Bootstrap 4 – Flip cards

Demo Image: Bootstrap 4 – Flip cards

Flip cards using Bootstrap 4

Author:
Chrisbo246
Created:
FEBRUARY 09, 2017
Made with:
HTML, CSS and JavaScript

16) Card Flipping AngularJS

Demo Image: Flipping Card (AngularJS)

Card Flipping AngularJS

Author:
Zachary Beyer
Created:
JULY 30, 2015
Made with:
HTML, CSS and JavaScript

17) React – Flip Cards Design

Demo Image: React – Flip Cards Design

React – Flip Cards Design for actors

Author:
Adam
Created:
MAY 11, 2018
Made with:
HTML, CSS and JavaScript

18) 3D Flipping Cards

Demo Image: 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

19) Player Flip Cards

Demo Image: Player Flip Cards

A simple css only flip cards.

Author:
Nick Nikolov
Created:
MARCH 06, 2015
Made with:
HTML, CSS and JavaScript

20) Google Now Inspired Flip Cards

Demo Image: 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

21) Social Flip Cards

Demo Image: Social Flip Cards

Messing around with 3d transforms and delayed transitions.

Author:
Charlotte Dann
Created:
AUGUST 05, 2012
Made with:
HTML, CSS

22) Style Flip-card Menu

Demo Image: 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

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

Demo Image: 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

24) Half flip cards 3d

Demo Image: 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

25) React – Flip Cards

Demo Image: React – Flip Cards

Responsive Flip Card display

Author:
Thomas Herman
Created:
SEPTEMBER 27, 2016
Made with:
HTML, CSS and JavaScript

26) Bulma + Vuejs Flip Card

Demo Image: 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

27) Flipping card UI

Demo Image: Flipping card UI

Flipping card UI

Author:
mario s maselli
Created:
JULY 03, 2015
Made with:
HTML, CSS and JavaScript

28) React Flipping Card with Tutorial

Demo Image: 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

29) Cross-Browser Flip Card

Demo Image: 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

30) Flipping Cards

Demo Image: Flipping Cards

Horizontal flipping cards on CSS

Author:
Nicola Markelov
Created:
OCTOBER 13, 2015
Made with:
HTML, CSS

31) Pure CSS Flip Card

Demo Image: Pure CSS Flip Card

Pure CSS Flip Card

Author:
Aron
Created:
MARCH 12, 2018
Made with:
HTML, CSS

32) 3D Profile Flip Card

Demo Image: 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

33) 3D Flip Card Effect

Demo Image: 3D Flip Card Effect

3D flip cards implemented with CSS3

Author:
Samet Erpik
Created:
AUGUST 23, 2014
Made with:
HTML, CSS and JavaScript

34) Multi Flip Cards

Demo Image: 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

About CV

I'm frontend developer