<div class="card card1">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="card card2">
<div class="front"></div>
<div class="back"></div></div>
<div class="card card3">
<div class="front"></div>
<div class="back"></div></div>
<div class="card card4">
<div class="front"></div>
<div class="back"></div></div>.card{width:100px; height:150px; position:relative; display:inline-block; margin-right:50px;}
.front{position:absolute; width:100px; height:150px; background:#ccc; top:0; left:0;}
.back{position:absolute; width:100px; height:150px; background:#ff0; top:0; left:0; transform:rotateY(90deg);}
.cardRotate .front{opacity:1;animation: rotateAni 0.5s 1; transform:rotateY(90deg);}
.cardRotate .back{opacity:1;animation: rotateAni2 0.5s 0.5s 1 backwards; transform:rotateY(0);}
.backRotate .front{animation: backAni 0.5s 1; opacity:1;}
.backRotate .back{opacity:0;}
@keyframes rotateAni{
0%{transform:rotateY(0);}
100%{transform:rotateY(90deg);}
}
@keyframes rotateAni2{
0%{transform:rotateY(-90deg);}
100%{transform:rotateY(0deg);}
}
@keyframes backAni{
0%{transform:rotateY(90deg);}
100%{transform:rotateY(0deg);}
}$(".card").on('click',function(){
$(".cardRotate").addClass("backRotate").removeClass("cardRotate");
$(this).addClass("cardRotate").removeClass("backRotate");
});
External CSS
This Pen doesn't use any external CSS resources.