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>