HTML

<div class="flip-container">
<div class="flipper"><!-- Front -->
<div class="front"><img style="border: 1px dotted #d9d9d9; -webkit-border-radius: 160%/20%; -moz-border-radius: 160%/20%; border-radius: 160%/20%; -webkit-box-shadow: #6d3112 3px 3px 9px; -moz-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px;" src="http://gif" alt="" width="180" height="230" /></div>
<!-- BACK -->
<div class="back"><img style="border: 1px dotted #BE433A; -webkit-border-radius: 160%/20%; -moz-border-radius: 160%/20%; border-radius: 160%/20%; -webkit-box-shadow: #6d3112 3px 3px 9px; -moz-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px;" src="http://gif" alt="" width="180" height="230" /></div></div></div>

CSS

<style type="text/css"><!--
/* Asignamos perspectiva a nuestro contenedor */
.flip-container {
  perspective: 1000;
  border: 1px dotted #d9d9d9;
 border-radius:160%/20%;
 
  /* Para Firefox - IE10+ debemos agregar propiedades extras */
  -moz-transform-style: preserve-3d;
  -moz-transform: perspective(1000px);
  -ms-transform-style: preserve-3d;
  -ms-transform: perspective(1000px);
}
 
 .flip-container, .front, .back {
   width: 189px;
  height: 239px;
}
 
 /* preserve-3d: Indicamos que todo elemento hijo del div flipper estara en un espacio 3D XYZ  */
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
 
.front, .back {
  /* Backface: Nos permite ocultar la parte posterior de los elementos html */
  /* en este caso FRONT - BACK */
  backface-visibility: hidden;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
   left: 0;
} 
/* FRONT: eje Y = 0 */
.front {
  transform: rotateY(0deg);
  background: #bcc7eb;
border-radius:160%/20%;
}
 
/* BACK: eje Y = -180, se mantendra oculto */
.back {
  transform: rotateY(-180deg);
  background: #dbafa5;
border-radius:160%/20%;
}
/* Hover */
.flip-container:hover .front {
  transform: rotateY(180deg);
}
.flip-container:hover .back {
  transform: rotateY(0deg);
}
/* Toggle - Moviles */
.flip-container.hover .front {
  transform: rotateY(180deg);
}
.flip-container.hover .back {
  transform: rotateY(0deg);
}
--></style>