http://pourquoipas732.eklablog.com/flip-rond-et-ovale-a117215784

 

HTML

<div id="flip-containera">
<div id="flippera">
<div id="fronta"><img style="border-radius: 50%; border: 2px dotted grey; box-shadow: 4px 4px 6px black;" src="http://file.mobilmusic.ru/26/ba/4c/1169786.gif" alt="" /></div>
<div id="backa"><img style="border-radius: 50%; border: 2px dotted grey; box-shadow: 4px 4px 6px black;" src="http://file.mobilmusic.ru/d8/d2/ed/1181447.gif" alt="" /></div>
</div>
</div>

CSS

<style type="text/css"><!--
#flip-containera {width:800px; height:600px; 
perspective: 1000;
 margin-left:auto; margin-right:auto;} 
#flip-containera:hover #flippera, #flip-containera.hover #flippera {transform: rotateY(180deg);} 
#flip-containera, #fronta, #backa {width: 800px; height: 600px;} 
#flippera {transition: 1s; transform-style: preserve-3d;    position: relative;} 
#fronta, #backa {backface-visibility: hidden; position: absolute; top: 0; left: 0;} 
#fronta {z-index: 2; transform: rotateY(0deg);} 
#backa {transform: rotateY(180deg);} 
--></style>