Texto 1

Texto 2

<div id="f1_container" class="hover">
<div id="f1_card" class="shadow">
<div class="front face">
<img style="margin-left: auto; border-radius: 2%; 
box-shadow: 1px 1px 6px 1px #666; display: block; 
margin-right: auto;" 
src="http://dentalcompany.es/Blog/wp-content/uploads/2015/05/5-Chaplin-baile-animado.gif" 
width="195" height="210"/>
</div> <div class="back face center">
<p>Texto 1</p> <p>Texto 2</p></div></div></div>

CSS

#f1_container { 
  position: relative; 
  margin: 10px auto; 
  width: 400px; 
  height: 400px; 
  perspective: 1000; 
  -webkit-perspective: 700; background: red; 
} #f1_card { 
  width: 400px; height: 400px; 
  transform-style: preserve-3d; 
  transition: all 1.0s ease-in-out; 
  -webkit-transform-style: preserve-3d; 
  -webkit-transition: all 1s ease-in-out; 
  -webkit-transform-origin: right; } 
#f1_container:hover 
#f1_card { 
  -webkit-transform: rotateY(-180deg); 
}