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>
