Understanding Card Flip animation using CSS

Cards have been surfacing as the new trend for design. They’re a great medium for communicating quick stories and help group related content for easy browsing.

I recently wrote a small piece of code for flipping a card element on a web page. A lot of articles I read explained how to write code for flipping a <div> element but none explained the ‘reasoning’ and the basic fundamental for easy understanding.

Here it is:

For the sake of simplicity I’ve stuck to pure HTML/CSS and I’m assuming that you’ve set up the basic template, that is, index.html and style.css.

1) Start with creating a basic skeleton of the card

<div class=”card”> 
  <!-- front of the card-->
  <div class=”front”>
    COME ON, HOVER OVER!
  </div>
  <!-- back of the card-->
  <div class=”back”>
    CARD FLIPPED.
  </div>
</div>

This means: We defined a <div> element with a class of a “card”. Within that, we defined two elements with “front” and “back” classes.

Basic skeleton for our card

2. Add CSS to position the front and back face of the card

Now we make the card look like a card, that is, it becomes rectangular and the back face goes behind the front side:

Visualizing the card

.card{  
  position:relative;
  width:321px;
  height:208px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.front{
  position: absolute;
  height:100%;
  width:100%;
  background-color: #CC3333;
  backface-visibility: hidden;
  color: #fff;
  text-align: center;
  line-height: 208px;
  font-family: Helvetica;
}
.back{
  position: absolute;
  height:100%;
  width:100%;
  background-color: #999999;
  backface-visibility: hidden;
  
  color: #fff;
  text-align: center;
  line-height: 208px;
  font-family: Helvetica;
  
  /* rotating the back face of the card */
  -ms-transform: rotateY(-180deg); /* IE 9 */
  -webkit-transform: rotateY(-180deg); /* Safari */
  transform: rotateY(-180deg);
}

This means:

• .card: We gave height and width to our card and positioned it ‘relative’. We also added a box-shadow around it to give it depth.
• .front: We made it cover the full height and full width of the card, gave it a background color and positioned it ‘absolute’. Backface-visibility is made hidden because we don’t want the backside to show at any time of the flip. Line height was added to vertically center the text.
• .back: Almost same as .front. Here we hide the backface because you can only see the front of the back side of the card on flipping. To place it behind the front side (as shown in gif), we have used transform which rotates the card -180 degree.

The idea here is to rotate the back side of the card by 180 degrees and keeping the positions of front and back equal.

3. Adding transition

To be able to look at the flip, we need to add transition property to our card which will specify the timing. Otherwise the flip will be too quick for us to interpret. We add the following to our ‘.card’ class:

-webkit-transition: transform 1.5s; /* Safari and Chrome */
 transition: transform 1.5s;

This means: We’re adding transition to our card. That means whenever our card will have to transform, it will take 1.5 seconds to complete it.

4. Adding perspective

Because we are creating a 3D space by putting the back side of the card behind the front side, we need to specify the perspective space in which our card resides. And then make sure that that perspective stays the same after the flip has completed.

Note that:

• Perspective should be added to the parent(or containing) element. This is because our card will be flipping within the parent’s space.
• In our case, the parent element is the body of the page. We can either add perspective to the body or wrap our card within another container. I prefer the latter.

We add ‘card-wrapper’ to our HTML skeleton and give it a perspective using CSS:

Adding a “card-wrapper”:

<div class="card-wrapper"> 
  <div class=”card”> 
    
    <!-- front of the card-->
    <div class=”front”>
      COME ON, HOVER OVER!
    </div>
    <!-- back of the card-->
    <div class=”back”>
      CARD FLIPPED
    </div>
  </div>
</div><!-- card end-->

Adding perspective to it: We’ve added 800px, but you’re free to choose your own as long as it gives our card the right depth. Add this to your CSS:

.card-wrapper {
  perspective:800px;
}

Preserving the perspective of the card upon transform(or flip): We add the following attribute to the ‘.card’ class in our CSS:

transform-style:preserve-3d;

5. When to flip?

Last thing we need to do is to define when to flip the card. It can be a click, drag or a hover. We’ll take hover since it’s simplest and doesn’t require JavaScript.

Whenever user hovers on your card, transform it by -180 degree or in other words, flip it.

Let’s add a hover event in our CSS to achieve this:

.card:hover {
  -ms-transform: rotateY(-180deg); /* IE 9 */
  -webkit-transform: rotateY(-180deg); /* Safari Chrome */
  transform: rotateY(-180deg);
}

This means: When user hovers over an element with the class of “.card”, it gets rotated by 180 degree.

6. And it’s done

Good job flipping the card! If you’re facing any issues or problems while doing this, feel free to reach out to me. :-)

Download source files from Github

Design inspiration: (.gif) Flip card