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

.card-container {
  perspective: 1000px;
  width: 200px;
  height: 300px;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  will-change: transform;
}

.card:hover {
  transform: rotateY(180deg);
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
  background-color: lightblue;
}

.front {
  background-color: lightcoral;
}