Category : Css | Author : Chtiwi Malek | First posted : 7/21/2014 | Updated : 9/26/2017
Tags : css3, tutorial, flip, cards, animation, plugin, effects, hover
CSS3 3D Flipping Cards Effect

CSS3 3D Flipping Cards Effect

In this tutorial we'll create a cross-browser 3D flipping card only using css3. The user will be able to flip a card and reveal its reverse side on hover or switch sides programmatically using JavaScript.

Here's an example illustrating the use of this css3 technique :

HTML Markup :

The html structure is simple, each card have a front and a back side, wrapped inside a container :
<div class="flipcard h">
    <div class="front">
      This is the front side
    <div class="back">
	  This is the back side
The div with class name 'flipcard' will be the main container, inside it we will place two divs representing the two sides of the card (front and back), these two divs will actually flip when the parent div is hovered.

Just add a class named 'v' or 'h' to the main div to define the flipping direction: horizontal or vertical.

CSS Code :

.flipcard {
  position: relative;
  width: 220px;
  height: 160px;
  perspective: 500px;
.flipcard.v:hover .front, .flipcard.v.flip .front{
  transform: rotateX(180deg);
.flipcard.v:hover .back, .flipcard.v.flip .back{
  transform: rotateX(0deg);
.flipcard.v .back{
  transform: rotateX(-180deg);
.flipcard.h:hover .front, .flipcard.h.flip .front{
  transform: rotateY(180deg);
.flipcard.h:hover .back, .flipcard.h.flip .back{
  transform: rotateY(0deg);
.flipcard.h .back{
  transform: rotateY(-180deg);
.flipcard .front, .flipcard .back
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.5s ease-in;
  color: white;
  background-color: #000;
  padding: 10px;
  backface-visibility: hidden;
When the main div is hovered, the two inside divs will be rotated 180° with the css3 ‘transform’ property. The flip duration will be 0.5 second for this example.

The front and back divs have an absolute position, they will be superposed and the back side (div) will be rotated initially and will use the css3 'backface-visibility' property to hide its backside (which became front after the initial rotation).

Programmatically flip a card :

To flip one or many cards programmatically via a button click or another javascript event, just add/remove the class 'flip' to their main div.
here’s the JavaScript line to do that :
// or using jQuery
// $("#cardId").toggleClass("flip");

Browser Support

This technique rely on CSS3, it has been tested on IE10, IE11, Firefox, Google chrome and should work on most modern browsers.
Feel free to comment if you have any question or improvement.
About the author :
Malek Chtiwi is the man behind
34 years old full stack developer.
Loves technology; but also likes design, photography and composing music.
Comments & Opinions :
IE workaround
I like your code, does not depend on the preserve-3d keyword which is not supported by internet explorer 10 and 11
- by Joe on 8/2/2014
Hello Malek,
I would like to put more than 1 fliping element however if I use absolute position they will both be located in the same place and if i use relative positioning then the back side of the flipcard is in different spot than front and it makes the site looks ugly. Could u tell me how to make it look like it is in the three examples at the top of this site?
- by Mateusz on 8/11/2014
Hi, this can be done by setting the main container to position:relative and the cards (front and back) to position:absolute. I've updated the code, thanks for pointing that out.
- by Chtiwi Malek on 8/13/2014
How Can I Click the Card to Flip?
Hey Malek,

This is a really great tutorial. How can I just make the card Flip on click without the hover effect?
I added a button so that it would flip on the click of the button, but it still flips when I hover over it.

Any suggestions would really help!

- Logan
- by Logan on 10/27/2014
It's not working on safari
Good one!! :)  but not working in safari :(
- by Deepu on 12/2/2016
Overlay efffect on cardflip
Can we add overlay effect during flip?..Text should  looks like top of the background
- by Arjun on 1/4/2019
On click?
Hover is great but since you can't hover on a mobile phone, we need a solution for onclick
- by Jacob on 12/17/2019
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :