SOURCE

var card=document.querySelector('.card');
card.addEventListener('click',function(){
  var len=this.className.length;
  this.className.indexOf('flipped')==-1?
    this.className+=' flipped':
  	this.className=this.className.slice(0,len-8)
});

<div id='con'>
  <div class='card'>
    <div class='front'>front</div>
    <div class='back'>back</div>
  </div>
</div>

div{
  padding:0;
  margin:0;
  font-size:larger;
}
.con{
    perspective:800px;
}
.card{
  position:absolute;
  background-color:blue;
  width:100px;
  height:144px;
  padding:5px;
  transition:transform 1s;
  transform-style: preserve-3d;

}
.card div{
  cursor:pointer;
  margin:2.5px;
  width:95px;
  height:135px;
  text-align:center;
  vertical-align:middle;
}
.front{
	transition:opacity 0.5s;
  position:absolute;
	background-color:#42b983;
  z-index:10;
}
.flipped .front{
	opacity:0;
}
.back{
  transition:all 0.5s;
  position:absolute;
	background-color:#f66;
  opacity:0;
  z-index:0;
  transform:rotateY(180deg);
}
.flipped .back{
	opacity:1;
}
.flipped{
  transform:rotateY(180deg);
}