How to create a Flip Card with CSS

Hello People🙋,

In this post, We will see how we can create Flip Card with CSS.

HTML:

    <div class="card-container">
     <div class="card">
       <div class="side">
         <h3>Front</h3>
       </div>
       <div class="side back">
         <h3>Back</h3>
       </div>
     </div>
    </div>

CSS:

/*card container with the height and width of 150px and used perspective for 3d*/
.card-container{
  cursor:pointer;
  height:150px;
  width:150px;
  perspective:600;
  position:relative;
}
/*card to fit the size of the card container by giving the width and height of 100% and position of absolute which is relative to the card container*/
.card{
  height:100%;
  width:100%;
  transform-style:preserve-3d;
  position:absolute;
  transition:all 1s ease-in-out;
}
/*card rotate from y axis on hover*/
.card:hover{
  transform:rotatey(180deg);
}
/*Front side of the card with the property of backface visibility to make the other side of card hidden*/
.side{
  backface-visibility:hidden;
  height:100%;
  width:100%;
  position:absolute;
  border-radius:6px;
  background-color:limegreen;
}
/*back side of the card*/
.back{
  transform:rotatey(180deg);
  background-color:hotpink;
}

Happy Coding! 🙌