<div class='cube'> 
  <div class='flip'>
    <p>Front</p>
  </div>
  <div class='flop'>
    <p>XXX</p>
  </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
  font-family: 'Open Sans', sans-serif;
  background: hsl(222,50%,95%);
  color: white;
  padding: 3em 0 0 0;
	line-height: 62px;
  margin: auto;
  
  -webkit-perspective: 1000px; /* <-NB */
}

/* Container box to set the sides relative to */
.cube {
	width: 100px;
	text-align: center;
	margin: 0 auto;
  
 -webkit-transition: -webkit-transform .3s;
	transition: transform .3s; /* Animate the transform properties */

	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d; /* <-NB */
  height: 100px;
}

.flip,.flop {
	border: 2px solid black;
  background: #3d405b;
  width: 100px;
  height: 100px
}


.flip {
	-webkit-transform: translateZ(50px);
	transform: translateZ(50px);
  position:absolute;
  
}

.flop {
	-webkit-transform: rotateY(90deg) translateZ(-50px);
	transform: rotateY(90deg) translateZ(-50px);
}


/* rotation */
.cube:hover {
	-webkit-transform: rotateY(89deg);
	transform: rotateY(89deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.