La funzione rotateY() definisce una trasformazione che sposta l’elemento attorno al proprio asse Y in modo ordinato senza deformarlo. La quantità di movimento è definita dal angolo specificato; se positivo, il movimento sarà in senso orario, se negativo, sarà antiorario.

È possibile capovolgere intorno agli assi X e Z, cambiando rotateY rotateX rotateZ.

Lo stile

.card-container {
  height: 500px;
  position: relative;
  width: 400px;
  }
.card {
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 0.5s ease-in-out;
  width: 100%;
}
.card:hover {
  transform: rotateY(180deg);
}
.card .side {
  backface-visibility: hidden;
  height: 100%;
  position: absolute;
  width: 100%;
  color:#FFF;
}
.card .back {
  transform: rotateY(180deg);
  color:#FFF;
}

La struttura

<div class="card-container">
  <div class="card">
    <div class="side">
    <img src="card-retro.jpg" width="400" height="500">
     </div>
    <div class="side back">
    <img src="card-fronte.jpg" width="400" height="500">
     </div>
  </div>
</div>

Scarica il codice completo