This is nice for exposing more information about an image.

Any content can go here.

HTML

<div id="f3_container" class="hover">
<div id="f3_card" class="shadow">
<div class="front face"><img src="http://mobikcc.com/images/sait/supersbornik79/010prikol/092.gif" alt="" /></div>
<div class="back face center">
<p>This is nice for exposing 
more information 
about an image.</p>
<p>Any content can go here.</p>
</div>
</div>
</div>

CSS

<style><!--
#f3_container {
  position: relative;
  margin: 10px auto;
  width: 240px;
  height: 320px;
  z-index: 1;
}
#f3_container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}
#f3_card {
  width: 100%;
  height: 100%;
  -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>