3d flip card effect with CSS

markup.html

<div class="container">
  <div class="flipcard">
    <figure class="front">
      Front of Card
    </figure>
    <figure class="back">
      Back of Card
    </figure>
  </div>
</div>

style.css

.container {
  position: relative;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  perspective: 800px;
}
.flipcard {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1s;
  -moz-transform-style: preserve-3d;
  -moz-transition: -moz-transform 1s;
}
.flipcard figure {
  width: 100%;
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
}

.flipcard .front {
  -webkit-transition: -webkit-transform 500ms;
  -moz-transition: -moz-transform 500ms;
}
.flipcard.flipped .front {
  -webkit-transform: rotate3d(0,1,0,-180deg);
  -moz-transform: rotate3d(0,1,0,-180deg);
}
.flipcard .back {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: -webkit-transform 500ms;
  -webkit-transform: rotate3d(0,1,0,180deg);
  -moz-transition: -moz-transform 500ms;
  -moz-transform: rotate3d(0,1,0,180deg);
}
.flipcard.flipped .back {
  -webkit-transform: rotate3d(0,1,0,0);
  -moz-transform: rotate3d(0,1,0,0);
}

Just have to add a class to the .flipcard div of "flipped" when you want the back to come into view and remove it to go back to the front.

Mess with the perspective px amount to change how near or close the flip appears to be happening.