CSS3 transform-style

<!doctype html>
<title>Example</title>
<style>
.container {
  position: relative;
  left:80px;
  top:60px;
  height: 200px;
  width: 200px;
  margin: 1px;
  border: 1px dotted firebrick;
  perspective: 250px; 
}
.rotate {
  padding:10px;
  width: 200px;
  height: 200px;
  text-align:center;
  background-color: gold;
  opacity: 0.8;
  transform-style: preserve-3d;
  animation: rotate 7s linear 0s infinite reverse none;
}
.container:hover .rotate {
  transform-style: flat;
}
@keyframes rotate {
  from { transform: rotateX(0); }
  to   { transform: rotateX(360deg); }
}
.rotate > div {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 80px;
  height: 50px;
  padding: 10px;
  box-sizing: border-box;
}
.rotate > :first-child {
  width:80px;
  height:70px;
  background-color: chartreuse;
  transform: translateZ(-80px) rotateY(35deg);
}
.rotate > :last-child {
  width:100px;
  height:50px;
  background-color: plum;
  transform: translateZ(50px) rotateX(50deg);
  transform-origin: 50% top;
}
</style>

<p>Hover over the rotating boxes to see what happens when the <code>transform-style</code> goes from <code>preserve-3d</code> to <code>flat</code>.</p>
<div class="container">
	<div class="rotate">Rotating box...
      <div>First Child</div>
      <div>Last Child</div>	
	</div>
</div>