卡牌3D翻转效果

在CSS3的3D世界中，默认情况下，我们是可以看到背后的元素。
因此，为了切合实际，我们常常会这样设置，使后面元素不可见：

               -webkit-backface-visibility:hidden;     /*注意：safari浏览器必须用webkit前缀*/
               backface-visibility:hidden;

html

          <div class="container">
            <div class="flip">
                 <div class="font"><img src="../Carousel/images/2.jpg" alt=""></div>
                 <div class="back"><img src="../Carousel/images/9.jpg" alt=""></div>
             </div>
          </div>

css

 1         .container {
 2             perspective: 1000px;
 3             transform-style: preserve-3d;
 4         }
 5         .container,.font,.back {
 6             width: 380px;
 7             height: 270px;
 8         }
 9         .flip {
10             position: relative;
11             transition: all .6s;
12             transform-style: preserve-3d;
13         }
14         .font,.back {
15             backface-visibility: hidden;/*为了让图画翻转时不露出背面*/
16             position: absolute;
17             top:0;
18             left:0;
19         }
20         img {
21             width: 100%;
22             height: 100%;
23             object-fit: cover;
24         }
25         .font {
26             z-index: 1;
27         }
28         .back {
29             transform: rotateY(-180deg);
30         }
31         .container:hover .flip {
32             transform: rotateY(180deg);
33         }

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身

注：perspective 属性只影响 3D 转换元素

也可以添加自定义动画

把原来的transition动画

       .container:hover .flip {
            transform: rotateY(180deg);
        }

改为animation动画

         .container:hover .flip{
            animation: backRotate 2s linear both;
          } 
          @keyframes backRotate{
            0%,30%{
                transform: rotateY(-180deg);
            }
            15%,45%{
                transform: rotateY(-150deg);
            }
            100%{
                transform: rotateY(0deg);
            }
          }