SOURCE

<div class="container">
  <div class="main">
    <div class="facade">Facade</div>
    <div class="back">Back</div>
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="top">Top</div>
    <div class="bottom">Bottom</div>
  </div>
</div>

.container{ margin: 100px;}
.main{
  position: relative;
  width: 300px;
  height: 300px;
  outline: 1px solid red;
}
.main div{
  width: 100px;
  height: 100px;
  line-height: 100px;
  position: absolute;
  text-align: center;
}
.facade{ background: lightblue;}
.back{ background: lightgreen;}
.right{ background: lightpink;}
.left{ background: lightcoral;}
.top{ background: lightyellow;}
.bottom{ background: lightsalmon;}

.facade{left:100px; top: 100px; z-index: 10;}
.back{left:100px; top: 100px;z-index:-1; }
.left{ left:0; top: 100px;}
.right{ right:0; top: 100px;}
.top{ left:100px; top: 0;}
.bottom{ left:100px; bottom: 0;}

.right{ 
  transform: rotateY(90deg);
  transform-origin:left;
}
.left{ 
  transform: rotateY(-90deg);
  transform-origin:right;
}
.top{ 
  transform: rotateX(90deg);
  transform-origin:bottom;
}
.bottom{ 
  transform: rotateX(-90deg);
  transform-origin:top;
}
.back{
  transform: translatez(-100px);
}
.main{
  perspective: 300px;
  transform-style: preserve-3d;
  PERSPECTIVE-ORIGIN: TOP LEFT;
}