CSS3 Animazione Flip La funzione rotateY()
La funzione rotateY() definisce una trasformazione o animazione 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
https://www.w3schools.com/css/default.asp