#cssref backface-visibility | Embed

<div class="container">
  <p>Hover over the card to see it flip.</p>
  <div class="card" id="card">
    <div class="face front">Front Face</div>
    <div class="face back">Back Face</div>
  </div>
</div>

body {
  background-color: #f5f5f5;
  color: #555;
  font-size: 1.2em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  padding: 1em;
  margin: 50px auto;
  max-width: 700px;
  text-align: center;
  -webkit-perspective: 800px;
  perspective: 800px;
}

.card {
  width: 300px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 300px;
  color: white;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.front {
  background-color: #0099CC;
  background-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/backface-visibility/kitten.jpg);
}

.back {
  background-color: black;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.card:hover {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

var card = document.getElementById('card');
var clicked = false;

card.onclick = function(){
  if(clicked == false) {
    this.classList.add('hover');
    clicked = true;
  }
  else {
    this.classList.remove('hover');
    clicked = false;
  }
}