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
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 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
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 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
- 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 - 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
- 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! I love your tutorial! 
- by Dat Nguyen on 6/8/2017
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).
- by Social Buisness on 7/28/2017
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="">businessenlarge</a></b>
- by generalcategory on 10/4/2017
Im happy I finally signed up
Quality articles is the crucial to be a focus for the people to go to see the web page, that's what this web site is providing. cheap football jerseys
- by Norman on 3/7/2018
Just wanted to say Hi!
I every time spent my half an hour to read this website's articles daily along with a mug of coffee. wholesale nhl jerseys
- by Lonny on 3/14/2018
Im happy I now registered
What's Taking place i'm new to this, I stumbled upon this I've discovered It positively helpful and it has aided me out loads. I hope to give a contribution & help other customers like its aided me. Good job. wholesale nfl jerseys
- by Robby on 3/28/2018
I am the new girl
Excellent web site you have got here.. It's hard to find quality writing like yours nowadays. I really appreciate people like you! Take care!! cheap nfl jerseys
- by Elliott on 4/16/2018
Just want to say Hi!
It's a shame you don't have a donate button! I'd without a doubt donate to this brilliant blog! I guess for now i'll settle for book-marking and adding your RSS feed to my Google account. I look forward to brand new updates and will talk about this blog with my Facebook group. Talk soon! cheap nba jerseys
- by Annette on 5/3/2018
I am the new girl
Thanks for sharing your thoughts about css3. Regards cheap mlb jerseys
- by Dawn on 5/6/2018
This is making me batty in IE 11
I'm going nuts trying to figure out how you have this working in IE11.   I've pulled out your code and tried to make it work on my end and it won't work. And then I realized when I open your code in refork in IE11, it too does not work.  So how is it working on this website in IE11?    Argh! 
- by Rachel on 7/18/2018
Hey Rachel. It was driving me batty too! It's nuts but the fact that the refork demo is being show on this page in an iframe is what allows it to animate correctly in IE! Ugh!
- by Jason Rundell on 8/1/2018
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
Thank you!
Thank you, much love! :)  
- by Jose Espino on 3/26/2019
Thank you!
Thank you! much love
- by Jose Espino on 3/26/2019
Thank You Man, Great Work!!!
Just want to say thank you for your help and the grate work
- by Senthil on 11/6/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
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
I am glad to see this brilliant post. I have really enjoy to reading this keep sharing more post like this.
- by john wick on 5/15/2020
Im glad I finally registered
viagra without a doctor prescription order viagra online
- by Madonna on 10/6/2020
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :