SOURCE

<div class="box">
    <div class="font">1</div>
    <div class="back">2</div>
    <div class="back">3</div>
</div>

*{ margin:0; padding:0}
.box{ width:300px; height:300px; position:relative; margin:0 auto; overflow:hidden}
.font,.back{ width:300px; height:300px; position:absolute; left:0; top:0; font-size:40px; line-height:300px; text-align:center; border-radius:50%}
.font{ background:#9FC; transition:all 0.3s linear; backface-visibility:hidden;}
.back{ background:#96F; transform:rotateY(180deg); backface-visibility:hidden;transition:all 0.3s linear;}
.box:hover .font{transform:rotateY(180deg);}
.box:hover .back{transform:rotateY(0deg);}

.font{ animation:font 5s ease-in-out 1 forwards;}
@keyframes font{
    0%{ transform:rotateY(0deg)}	
	100%{ transform:rotateY(3780deg)}	/*(360*n+180)*/
}
.back{ animation:back 5s ease-in-out 1 forwards;}
@keyframes back{
    0%{ transform:rotateY(3780deg)}	/*(360*n+180)*/
	100%{ transform:rotateY(0deg)}	
}