HTML

<div id="f1_container">
 <div id="f1_card">
 <div class="front face"><img style="border-radius: 50%; border: 10px solid white;" src="https://lh3.googleusercontent.com/-8_Yh3KupNZs/U3jA5Y_oMnI/AAAAAAAAaR4/x0xGiy9qcJw/w359-h544-no/11.jpg" alt="" width="160" height="220" /></div>
 <div class="back face"><img style="border-radius: 50%; border: 10px solid white;" src="https://lh6.googleusercontent.com/-6HNw97idMTM/U3jAPmf3NXI/AAAAAAAAaQ4/wbqMsAzXBxw/w367-h544-no/1.gif" alt="" width="160" height="220" /></div>
</div></div>

CSS

<style type="text/css"><!--
#f1_container {position: relative; width: 160px; height: 220px; z-index: 1; margin-left:auto; margin-right:auto; perspective: 100;}
 #f1_card {width: 160px; height: 220px; transform-style: preserve-3d; transition: all 1.0s linear;}
#f1_container:hover #f1_card {transform: rotatex(180deg);}
 .face {position: absolute; width: 160px; height: 220px; backface-visibility: hidden;}
 .face.back { display: block; transform: rotatex(180deg); width: 160px; height: 220px; }
 --></style>