CSS Card Flip Animation

May 31, 2020

In this post, I will share how to create a card hover flip animation with only CSS.

For an example of this effect, hover the card below.

See the Pen
Card Flipping Effect by Steven Stromick (@sstromick)
on CodePen.

Let’s start with the HTML for the card, card front and card back.

<div class="card__hover-area">
   <div class="card">
      <div class="card__front"></div>
      <div class="card__back">
         <h3>The Louvre</h3>
         <p>The Louvre (French: Musée du Louvre), is the world's largest art museum and a historic monument in Paris, France. A central landmark of the city, it is located on the Right Bank of the Seine in the city's 1st arrondissement (district or ward). – <a href="https://en.wikipedia.org/wiki/Louvre">Learn More ›</a></p>
      </div>
   </div>
</div>

Here is the starting CSS for the card front and back.

.card {
   height: 350px;
   width: 350px;
   position: relative;
   transition: .5s all ease-out;
   transform: rotateY(0) scale(1);
   box-shadow: 0 2px 4px rgba(0,0,0,.3);
}

.card > div {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
}

.card__front {
   background: url(https://images.unsplash.com/photo-1535399475061-ad1dca038c26?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3a6a42c98d8c702c874bea614f54f588&auto=format&fit=crop&w=634&q=80);
   background-size: cover;
   transition: .4 all linear;
}

.card__back {
   background: #c4dcd9;
   color: #021512;
   opacity: 0;
   transition-delay: .17s;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   flex-direction: column;
   padding: 2em;
   transform: rotateY(.5turn);  
   font-family: 'Georgia';
}

Next we need to add the CSS to create the card flip effect on hover. The “perspective” property is what creates the 3D effect of the card flip. You will need to experiment with some values… but in general, you will want a large value for the perspective.

.card__hover-area {  
   perspective: 500px;
}
.card__hover-area:hover .card {
   transform: rotateY(.5turn) scale(1.2);
   box-shadow: 0 10px 30px rgba(0,0,0,.16);
}

.card__hover-area:hover .card__back {
   opacity: 1;
   transition-delay: .17s;
}

That’s all there is to it…. now you can create a card flip animation with CSS.