How to Flip a card on Hover using pure CSS (Flipping Card Effect)

Yes, you read it right. In today's article, we will see how you can flip a card (division) on hover using pure css. 

First of all let's look at our goal. We have a division which we call it as "card". We have some content written on the front side of the card and some other content on the back side. The back side is not yet visible to the user. We want to show the back side of the card only when user hovers over it. So basically, when the user hovers over the card, it flips and now the front side is invisible and the back side is visible.

Let's see the implementation. I have tried to explain each and every line using comments.

Step 1: HTML

  <div class="box">
    <div class="card">
      <div class="front">
       THIS IS THE FRONT SIDE
      </div>
      <div class="back">
        THIS IS THE BACK SIDE
      </div>
    </div>
  </div>


<!--hover will not work properly if only 'card' is used. It is a must to use 'card' and 'box' both.Try removing the box to see the difference.-->

Step 2 : CSS

 .box{
  height:150px;
  width:150px;
  margin:40px;
  border:1px solid grey;
-webkit-perspective: 1000;    /*so that 'card' will rotate in a 3d way.  It is the CHILD elements that get the perspective view, NOT the element itself.*/
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;

}
.card{
  background:blue;
  height:100%;
  width:100%;
  text-align:center;
  color:white;

  -webkit-transition: 0.6s;        /*flipping takes 0.6 seconds*/
-webkit-transform-style: preserve-3d;          /*try removing it to see the importance of this line :) */

-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
  
 -o-transition: 0.6s;
-o-transform-style: preserve-3d;

transition: 0.6s;
transform-style: preserve-3d;

}

.box:hover .card{

  /*flip the 'card' when user hovers over 'box'*/

 -webkit-transform: rotateY(180deg);
 -moz-transform: rotateY(180deg);
 -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.front,.back{
  backface-visibility:hidden;       /*so that backside will not be seen*/
  position:absolute;                 /*otherwise back will start after front ends*/
}

.back{
  transform:rotateY(180deg);     /*initially back is kept rotated. Hence it cannot be seen because of backface visibility property*/
}

That's it folks. Here is the codepen for the same. Have a look at it.

See the Pen Flipping Card Effect by dharmik joshi (@dharmikjoshi) on CodePen.

Do give your opinions in the comment section.

Happy blogging!