<div class="card">
  <div class="card-inner">
    <div class="card-front">Frente</div>
        
    <div class="card-back">Verso</div>  
  </div>
</div>

.card {
  width: 300px;
  height: 300px;
  perspective: 1200px;
}
.card:hover .card-inner {
  transform: rotateY(180deg);
}

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

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

.card-front {
  background-color: lightgreen;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
}