Cacher is the code snippet organizer for pro developers

body {
 background: #ccc;   
}
.flip {
  -webkit-perspective: 800;
  width: 400px;
  height: 200px;
  position: relative;
  margin: 50px auto;
}
.flip .card.flipped {
  -webkit-transform: rotatex(-180deg);
}
.flip .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
}
.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden ;
  z-index: 2;
  font-family: Georgia;
  font-size: 3em;
  text-align: center;
  line-height: 200px;
}
.flip .card .front {
  position: absolute;
  z-index: 1;
  background: black;
  color: white;
  cursor: pointer;
}
.flip .card .back {
  -webkit-transform: rotatex(-180deg);
  background: blue;
  background: white;
  color: black;
  cursor: pointer;
}

$('.flip').click(function(){
    $(this).find('.card').addClass('flipped').mouseleave(function(){
        $(this).removeClass('flipped');
    });
    return false;
});

<div class="flip"> 
  <div class="card"> 
      <div class="face front"> 
          Front
      </div> 
      <div class="face back"> 
          Back
      </div> 
  </div> 
</div>