1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 html, body { 13 height: 100%; 14 } 15 16 .wrapper { 17 position: relative; 18 width: 200px; 19 height: 200px; 20 } 21 22 .wrapper:hover .font { 23 transform: rotateY(90deg); 24 transition: 200ms linear; 25 } 26 27 .wrapper:hover .back { 28 transform: rotateY(0deg); 29 transition: 200ms linear 200ms; 30 } 31 32 .font { 33 position: absolute; 34 width: 200px; 35 height: 200px; 36 background: yellow; 37 z-index: 10; 38 transition: 200ms linear 200ms; 39 } 40 41 .back { 42 position: absolute; 43 width: 200px; 44 height: 200px; 45 background: red; 46 transition: 200ms linear; 47 transform: rotateY(90deg); 48 } 49 </style> 50 </head> 51 <body> 52 <div class="wrapper"> 53 <div class="font"></div> 54 <div class="back"></div> 55 </div> 56 </body> 57 </html>