Edit on
<div class="container">
  <div class="flat">
    <div class="child1">
      <div class="child2">
        <div class="child3">
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="preserve">
    <div class="child1">
      <div class="child2">
        <div class="child3">
        </div>
      </div>
    </div>
  </div>
</div>
.flat, 
.flat .child1,
.flat .child2 
.flat .child3 {
    transform-style: flat;
}
.preserve, 
.preserve .child1, 
.preserve .child2, 
.preserve .child3 {
    transform-style: preserve-3d;
}

.child1, .child2, .child3 {
  transform:translateZ( 40px );
}


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

.container {
	perspective: 800px;
	width: 300px;
	margin: 20px;
  float:left;
  border:1px solid grey;
}

.flat, .preserve {	
  background: #222;
  position:relative;
	width: 300px;
	height: 250px;
  border:1px solid white;
  color:#fff;
  transform: rotate3d( .5, 1, -0.5, 45deg );
}

.child1, .child2, .child3 {
  width:80%;
  height:80%;
  position:absolute;
  top:10%;
  left:10%;
  border:1px solid grey;
  background:rgba(2,2,2,0.3);
}
Rerun