码迷,mamicode.com
首页 > 其他好文 > 详细

背靠背效果

时间:2019-08-08 23:15:24      阅读:74      评论:0      收藏:0      [点我收藏+]

标签:code   viewport   col   lan   initial   dex   ice   img   cal   

 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>

技术图片

背靠背效果

标签:code   viewport   col   lan   initial   dex   ice   img   cal   

原文地址:https://www.cnblogs.com/yuanxiangguang/p/11324243.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!