Edit on
<div class="container visible">
  <div class="front">
    <h1>front</h1>
  </div>
  <div class="back">
    <h1>front</h1>
  </div>
</div>

<div class="container invisible">
  <div class="front">
    <h1>front</h1>
  </div>
  <div class="back">
    <h1>front</h1>
  </div>
</div>
.front { transform:rotateY(60deg) scaleX(1.5);  }
.back  { transform:rotateY(120deg) scaleX(1.5); }
.visible .back   { backface-visibility: visible; }
.invisible .back { backface-visibility: hidden;  }

/* ------------------------------------------- */

.container {
	perspective: 800px;
	width: 300px;
  height:200px;
	margin: 20px;
  float:left;
  padding-left:15px;
  border:1px solid grey;
}

.front, .back {	
  float:left;
  background: #222;
  position:relative;
  top:25px;
	width: 140px;
	height: 150px;
  border:1px solid white;
  color:#fff;
}
h1 {
  text-align:center;
  margin-top:50px;
}
Rerun