Note that I've had to change the shadow to keep it looking normal.

<div id="f2_container" class="hover">
  	<div id="f2_card" class="shadow">
	<div class="front face">
<img style="border-radius: 10px; box-shadow: 0px 0px 10px #D8D7DB;" src="https://img-fotki.yandex.ru/get/6402/42830165.101/0_8fe00_e00c66c1_orig" width="262" height="220" />
</div>
<div class="back face center">
<p>Note that I've had to change the shadow to keep it looking normal.</p>
</div></div></div>

CSS

<style>
#f2_container {
  position: relative;
  margin: 10px auto;
  width: auto;
  height: auto;
  z-index: 1;
}
#f2_container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}
#f2_card {
  width: 64%;
  height: 30%;
  border-radius: 10px; 
  border: 1px dotted #5C5B85; 
  -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;
}
#f2_container:hover #f2_card, #f2_container.hover_effect #f2_card {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-box-shadow: -5px 5px 5px #aaa;				
  -moz-box-shadow: -5px 5px 5px #aaa;
  box-shadow: -5px 5px 5px #aaa;		
}
</style>