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>
    <div class="back">
	  This is the back side
    </div>
</div>
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
{
  position:absolute;
  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 :
document.querySelector('#cardId').classList.toggle('flip');
// 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 Codicode.com
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
Positioning.
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
With a button click
Your code is really helpful for me. I would like to know how do I perform the same animation on a button click. I can't make it work. Can you please help me.
 
- by josh on 8/14/2014
thanks
thanks a lot
its working properly thank you so much bro 
- by nirav jethava on 9/2/2014
the animators
Thanks Yu are genius...
- by domashy on 10/3/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
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/28/2014
it's not working on chrome
hi,
please help with a info: how do i need to save this files html and css to make it work? i have save it like index.html for htmls and style.css for the css code and when i open the index file it shows me "This is the front side" and "This is the back side" ! 
anyone, help please.

thanks in advance
- by Ewgor on 11/3/2014
On Click
hey, how can i add a click button for flip effect?
- by Max on 11/28/2014
Thank you!
I was searching and searching for a simple flip effect without any cross browser issues and this was the ticket.  Thank you so much!
- by David on 1/29/2015
flipped tile in ipad
i like your code. it looks great. is this code working on ipad. if it not work means how to over come or alrenate the code. pls help me.
- by manoj on 2/10/2015
Thanks
Thanks for this I am using this to base before and after photos on :)
- by Jennie on 2/11/2015
working in IE
An example working in IE is visible here www.seeveeze.com
- by amine on 3/18/2015
brilliant! Thanks
This is brilliant. Thank you for sharing this awesome piece code! :) :) :)
- by DE on 6/19/2015
Does exactly as it states
Fantastic. Thank you. Simple yet brilliant
- by Jeff on 6/22/2015
Help for touch screen
This works great, but can you help me with overcoming the hover issue on touch screens using the methoad above for card flipping transitions.
 
- by Jeff on 6/23/2015
nice one!
I found another example first, at http://davidwalsh.name/css-flip - but I needed one which didn't use div attribute (his way uses "ontouchstart"). Nice one, saved me! =D
- by Johnny C on 6/26/2015
Vertical Flip
Here is the complete solution to flip a div vertically 
https://uisnip.appspot.com/?share=/s/9tjc3v4b5wt6mcm/VerticalFlip-2?dl=0
- by Sumit Kapoor on 8/19/2015
It's not working on safari
Good one!! :)  but not working in safari :(
- by Deepu on 12/2/2016
Thanks!
Thanks! I love your tutorial! 
- by Dat Nguyen on 6/8/2017
fzdf
Selecting bras online are really a big help for ladies. They are able to find all merchandise that they really want easily without preparing to the markets. You will most definately spend less a lot of time purchasing online as being the buying technique is structure short. buy bra online
- by sdfg on 6/29/2017
Just want to say Hello.
bookmarked!!, I love your website! p21756
- by bookmarked!!, I love your website! p21756 on 7/21/2017
Many additional vowels when compared with those noted allow me to share listed inside International Phonetic Alphabet. Two more pronunciations every single for OE along with UE are routine in This particular language and The german language, and do include loanwords produced into Uk from these kind of languages (fortunately they are represented by simply O along with U using umlauts). nhanceontario.ca
- by Social Buisness on 7/28/2017
High
Many males who've apparently regular bodily characteristics still choose a male penile enhancement. Those which take fascination with such a great endeavor typically have two person reasons. You will discover males because their occupations require these to exemplify the particular macho system.	<b><a href="http://www.businessenlarge.com">businessenlarge</a></b>
- by generalcategory on 10/4/2017
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :