卡牌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

        .container {
            perspective: 1000px;
            transform-style: preserve-3d;
        }
        .container,.font,.back {
            width: 380px;
            height: 270px;
        }
        .flip {
            position: relative;
            transition: all .6s;
            transform-style: preserve-3d;
        }
        .font,.back {
            backface-visibility: hidden;/*为了让图画翻转时不露出背面*/
            position: absolute;
            top:0;
            left:0;
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .font {
            z-index: 1;
        }
        .back {
            transform: rotateY(-180deg);
        }
        .container:hover .flip {
            transform: rotateY(180deg);
        }

当为元素定义 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);
            }
          }