css3 flip page effect

css3flip.html

== .css ==
.postcard {
  position: relative;
  margin: 0 auto;
  width: 400px;
  height: 270px;
}

.postcard-front,
.postcard-back {
  position: absolute;
  backface-visibility: hidden;
  transition: transform 1s ease-in-out;
}

.postcard .postcard-back {
  transform: rotateY(180deg);
}

.postcard:hover .postcard-front {
  transform: rotateY(180deg);
}

.postcard:hover .postcard-back {
  transform: rotateY(0deg);
}

== .html == 
<div class="postcard">
  <div class="postcard-back"><img height="270" width="400" src="backImage.png" alt=""></div>
  <div class="postcard-front"><img height="270" width="400" src="frontImage.png" alt=""></div>
</div>