实现翻牌的效果css

/* 翻的正面 */
.front-pai{
　　width: 200rpx;
　　height: 258rpx;
　　background-color: #e24444;
　　padding-bottom: 14rpx;
　　box-sizing: border-box;
　　position: absolute;
　　top: 0;
 　  left: 0;
　　opacity: 1;
　　transform-origin: center;
　　transform: rotateY(0deg);
　　transition: opacity .8s, transform .8s;
}
/* 翻的结果面 */
.back-pai{
　　width: 200rpx;
　　height: 258rpx;
　　position: absolute;
　　top: 0;
　　left: 0;
　　opacity: 0;
　　transform-origin: center;
　　transform: rotateY(90deg);
　　transition: opacity .8s, transform .8s .5s;
}
/* 翻的效果 */
.front-ani{
　　opacity: 0;
　　transform: rotateY(90deg);
}
.back-ani{
　　opacity: 1;
　　transform: rotateY(0);
}