How to make a Flip Card?

You may have seen Hover Cards on which when we hover, some action happens with some effects.
So today we are going to make a flip card
:
First of all What is flip card?
A card on which when we hover it will flip and show the back side. Flip Effect can be used for cards like visiting card, etc.

Let us get started!

1. HTML

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Front Side</h2>
    </div>
    <div class="flip-box-back">
      <h2>Back Side</h2>
    </div>
  </div>
</div>

2. CSS

.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This is to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move hover on container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Put the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side */
.flip-box-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

See an Example below:

Hope you have made flip card successfully!
That is it for this blog.

Blog

How to make a Flip Card?

Tilak Jain

Let us get started!

Join Our Newsletter. No Spam, Only the good stuff.

Related