codice:
#f1_container {
  position: relative;
  margin:10pxauto;
  width:450px;
  height:281px;
  z-index:1;
}
#f1_container {
  perspective:1000;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  -o-perspective: 1000;
}
#f1_card {
  width:100%;
  height:100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transition: all 1.0s linear;
  -webkit-transition: all 1.0s linear;
  -moz-transition: all 1.0s linear;
  -ms-transition: all 1.0s linear;
  -o-transition: all 1.0s linear;

}
#f1_container:hover #f1_card {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  box-shadow:-5px5px5px#aaa;
  -webkit-box-shadow: -5px 5px 5px #aaa;
  -moz-box-shadow: -5px 5px 5px #aaa;
  -ms-box-shadow: -5px 5px 5px #aaa;
  -o-box-shadow: -5px 5px 5px #aaa;

}
.face {
  position: absolute;
  width:100%;
  height:100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;

}
.face.back {
  display: block;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  box-sizing: border-box;
  padding:10px;
  color: white;
  text-align: center;
  background-color:#aaa;
}
Mo' paghi una birra però :P