1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 6 <title>背靠背</title> 7 <style> 8 /* div{ */ 9 /* 当元素不面向屏幕时是否可见 */ 10 /* backface-visibility: visible; */ 11 /* } */ 12 body{ 13 perspective: 500px; 14 } 15 div{ 16 width: 200px; 17 height: 300px; 18 margin: 200px auto; 19 position: relative; 20 transform-style: preserve-3d; 21 22 } 23 div img{ 24 width: 200px; 25 height: 300px; 26 position: absolute; 27 left: 0; 28 top: 0; 29 /* 过度效果 */ 30 transition: all 2s linear; 31 32 } 33 div img:first-child{ 34 z-index: 1; 35 backface-visibility: hidden; 36 } 37 div:hover img{ 38 transform: rotateY(180deg) 39 } 40 </style> 41 </head> 42 <body> 43 <div> 44 45 <img src="images/1.jpg" alt="" width="200" height="300"/> 46 <img src="images/2.jpg" alt="" width="200" height="300"/> 47 48 </div> 49 50 </body> 51 </html>
