<div class="card-container">
  <div class="card">
    <div class="side">front</div>
    <div class="side back">back</div>
  </div>
</div>

.card-container {/*this is the boundaries of the card*/
  height: 150px;
  perspective: 600;
  position: relative;
  width: 150px;
}
.card {
  height: 100%;
  position: absolute;
 
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 100%;
}
.card:hover {
  transform: rotateY(180deg);
}
.card .side {/*front of card*/
  backface-visibility: hidden;
  background: red;
  height: 100%;
  position: absolute;
  width: 100%;
}
.card .back {/*back of card*/
   background: green;
  transform: rotateY(180deg);
}