css实现翻牌动画效果

css代码

 .outer{                //翻牌的大盒子
    position:relative;  
    width: 30%;
    height:0;
    line-height:0;
    padding:0 0 45% 0;
    text-align:center;
    margin: 0 auto;
    // border:1px solid red;

}
.outer div{
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    position: absolute;//absolution元素会找上一个relative元素，紧挨左上角排列，实现重叠效果
    transform-style: preserve-3d;
    backface-visibility:hidden;
    transition:all 0.5s;//改变旋转速度
}

.div1{                //背面元素
  transform:rotateY(0);//背面，就是一开始看到的面
}
.div2{                //正面元素
  position:relative;//这是为了在正面继续追加重叠元素
  transform:rotateY(-180deg);
}
.outer:hover .div1{
    transform:rotateY(-180deg);
}
.outer:hover .div2{
    transform:rotateY(0deg);
}

html代码 

       <div class="outer">
            <div class="div1">
                <img src="../../assets/tab4pic.png" alt="">
            </div>
            <div class="div2">
                <img src="../../assets/card.png" alt="">
            </div>
        </div>