Texto 1

Texto 2

<div id="f3_container" class="hover">
<div id="f3_card" class="shadow">
<div class="front face">
<img src="https://img-fotki.yandex.ru/get/6438/131165231.36/0_aa92e_e58bda4a_orig"
 width="195" height="210"/>
</div> <div class="back face center"> 
<p>Texto 1</p> <p>Texto 2</p> </div></div></div>

CSS

<style>
 #f3_container {
 position: relative;
 margin: 10px auto;
  width: auto;
 height: auto;
 z-index: 1;
 }
 #f3_container {
 -webkit-perspective: 1000;
 -moz-perspective: 1000;
 -o-perspective: 1000;
 -ms-perspective: 1000;
 perspective: 1000;
 }
 #f3_card {
  width: 50%;
 height: 40%;
 -webkit-transform-style: preserve-3d;
 -webkit-transition: all 1.0s linear;
 -moz-transform-style: preserve-3d;
 -moz-transition: all 1.0s linear;
 -o-transform-style: preserve-3d;
 -o-transition: all 1.0s linear;
 -ms-transform-style: preserve-3d;
 -ms-transition: all 1.0s linear; 
 transform-style: preserve-3d;
 transition: all 1.0s linear;
 }
 #f3_container:hover #f3_card, #f3_container.hover_effect #f3_card {
 -webkit-transform: rotateZ(180deg);
 -moz-transform: rotateZ(180deg); 
 -o-transform: rotateZ(180deg);
 -ms-transform: rotateZ(180deg); 
 -webkit-box-shadow: -5px -5px 5px #aaa; 
 -moz-box-shadow: -5px -5px 5px #aaa;
 box-shadow: -5px -5px 5px #aaa; 
 }
 </style>