1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .box{ 8 width: 200px; 9 height: 300px; 10 margin: 50px auto 0; 11 overflow: hidden; 12 position: relative; 13 } 14 15 .box img{ 16 width: 200px; 17 height: 300px; 18 backface-visibility: hidden; 19 transform-style: preserve-3d; 20 transition: all 2s ease; 21 transform: perspective(800px) rotateY(0deg); 22 } 23 24 .box .pig_back{ 25 width: 200px; 26 height: 300px; 27 position: absolute; 28 bottom:0px; 29 text-align: center; 30 line-height: 300px; 31 background-color: rgba(0,0,0,0.3); 32 transform-style: preserve-3d; 33 backface-visibility: hidden; /* backface-visibility 设置盒子背面是否可见 */ 34 transition: all 2s ease; 35 transform: perspective(800px) rotateY(-180deg); 36 } 37 38 .box:hover img{ 39 transform: perspective(800px) rotateY(180deg); 40 } 41 42 .box:hover .pig_back{ 43 transform: perspective(800px) rotate(0deg); 44 } 45 </style> 46 </head> 47 <body> 48 <div class="box"> 49 <img src="banner01.jpg" alt="背景图片"> 50 <div class="pig_back">这是图片说明</div> 51 </div> 52 </body> 53 </html>