css3之图片正反面翻转

效果图:                                                              

                 

                

 

简化代码如下:

 1 <template>
 2     <div class="flip-box">
 3         <div class="flip-item flip-item-front"> 
 4             正面
 5         </div>
 6         <div class="flip-item flip-item-back">
 7             反面
 8         </div>
 9     </div>
10 </template>
11 
12 <style lang="scss">
13     .flip-box{
14         width:400px;
15         height:600px;
16         position:relative;
17         .flip-item{
18             position:absolute;
19             left:0;
20             top:0;
21             width:100%;
22             height:100%;
23             transition:all .5s ease-in-out;
24             transform-style:preserve-3d;
25             backface-visibility:hidden;
26             box-sizing:border-box;
27         }
28         .flip-item-front {
29            // background: url("~@/assets/images/delivery/delivery_sf.png") center no-repeat;
30            // background-size:100%;
31            background-color:red;
32            transform:rotateY(0deg);
33            z-index:2;
34         }
35        .flip-item-back {
36           transform:rotateY(180deg);
37           z-index:1;
38           background-color:black;
39         // background: url("~@/assets/images/delivery/delivery_ems.png") center no-repeat;
40         // background-size:100%;
41        }
42       .flip-box:hover .flip-item-front {
43         z-index:1;
44         transform:rotateY(180deg);
45       }
46       .flip-box:hover .flip-item-back{
47         z-index:2;
48         transform:rotateY(0deg);
49       }
50   }
51 </style>

 

posted @ 2020-08-05 17:11  橙子不是orange  阅读(1276)  评论(0)  编辑  收藏  举报