<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .rotate-container:hover .flipper { transform: rotateY(180deg); } .rotate-container, .front, .back { width: 320px; /* height: 480px; */ } .rotate-container { perspective: 1000; transform-style: preserve-3d; } .flipper { transition-duration: 1s; transform-style: preserve-3d; position: relative; } .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } .front { z-index: 2; } .back { transform: rotateY(-180deg); } </style> </head> <body> <div class="rotate-container"> <div class="flipper"> <div class="front"> 11 <img src="https://images-cn.ssl-images-amazon.com/images/I/51fD0ZgQoXL._SL400_.jpg" alt=""> </div> <div class="back"> 22 <img src="https://images-cn.ssl-images-amazon.com/images/I/51fD0ZgQoXL._SL400_.jpg" alt=""> </div> </div> </div> </body> </html>