library_books<div class="flipper flipper-x card">
  <div class="front">
    <img src="/images/icon.png"><h2>Learn to Explore</h2>
  </div>
  <div class="back">
    <p>Your content</p>
  </div>
</div>

library_books<style>
*{box-sizing:border-box;}
.flipper {
  position: relative;
  transition: 1s;
  transform-style: preserve-3d;
  height: 250px;  /*set height of flipper*/
  width: 250px;   /*set width of flipper*/
  margin:10px;
}
.front,.back {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width:100%;
  display:flex;
  justify-content: center;
  align-items:center;
  backface-visibility: hidden;
  flex-direction:column;
  box-shadow:0 0 4px rgba(0,0,0,0.3);
}
.front{
  background-color: #f7f7f7;
  cursor:pointer;
}
.back{
  background-color: black;
  padding: 5px 10px;
  color:white;
}

/*for flipper-x */
.flipper-x{
  transform-origin: 100% 50%;
  transform: perspective(2000px) rotateX(0deg);
}
.flipper-x .back{transform: rotateX(180deg);}
.flipper-x .front{transform: rotateX(0deg);}

.flipper-x:hover{
  transform: perspective(2000px) rotateX(180deg);
}
.flipper-x.minus:hover{
  transform: perspective(2000px) rotateX(-180deg);
}

/*for flipper-y */
.flipper-y{
  transform-origin: 50% 100%;
  transform: perspective(2000px) rotateY(0deg);
}
.flipper-y .back{transform: rotateY(180deg);}
.flipper-y .front{transform: rotateY(0deg);}

.flipper-y:hover{
  transform: perspective(2000px) rotateY(180deg);
}
.flipper-y.minus:hover{
  transform: perspective(2000px) rotateY(-180deg);
}
</style>