SOURCE

var v1 = document.querySelector('.demo1'),v2=document.querySelector('.demo1-1')
document.addEventListener('click',function(e){
  v1.classList.add('demo1-m');
  v2.classList.add('demo1-1-m');
})
v1.addEventListener('animationend',function(){
  console.log('end');
},false)

<div class="demo1">
　　<div class="demo1-1">
　　　　<div class='info'>点击正面</div>
　　</div>
　　<div class="demo1-2">这是反面</div>
</div>

.demo1 {
        margin: 20px auto;
        width: 200px;
        perspective: 1100px;/*重点*/
        height: 300px;
        position: relative;
        transform-style: preserve-3d;/*重点*/
        transform:rotateZ(-25deg);
        color: #fff; 
        
    }
.demo1-m{
  animation:m2 2s linear 0s 1 both;
}
    .demo1 .demo1-1,.demo1 .demo1-2 {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        text-align: center;
        background-color: blue;
    }

    .demo1 .demo1-1{
        z-index: 2;
        background-color: red;
        transform-origin: left;
        transition: all 1s ease-in-out;
        transform-style: preserve-3d;
        
    }
.demo1-1-m{
  animation:m1 2s ease 0s 1 both;
}
@keyframes m1{
  0%{
     transform: rotateY(0deg);
  }
  100%{
     transform: rotateY(-120deg);
  }
}
@keyframes m2{
  0%{
     transform: rotateZ(-25deg) scale(1);
  }
  100%{
     transform: rotateZ(0deg) scale(3);
  }
}