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{
  width: 800px;
  height: 800px;
  margin: 100px;
  outline: 1px solid red;
}
.main{
  position: relative;
  padding-left: 100px;
  padding-top: 100px;
  perspective: 600px;
  transform-style: preserve-3d;
}
.main div{
  width: 100px;
  height: 100px;
  line-height: 100px;
  position: absolute;
  opacity: 0.5;
}
.facade{ background: lightblue;}
.back{ background: lightgreen;}
.right{ background: lightpink;}
.left{ background: lightcoral;}
.top{ background: lightyellow;}
.bottom{ background: lightsalmon;}

.facade{ transform: translatez(50px);}
.back{ transform: translatez(-50px);}
.right{ transform:translateX(50px) rotateY(90deg);}
.left{ transform: translateX(-50px) rotateY(90deg);}
.top{ transform: translateY(-50px) rotateX(90deg);}
.bottom{ transform:translateY(50px) rotateX(90deg);}

.main{
  perspective-origin:left top;
  animation: play 5s;
}

@Keyframes play{
  0%{
    transform: rotatex(0) rotateY(0) rotateZ(0);
  }
  100%{
    transform: rotatex(0) rotateY(90deg) rotateZ(0) ;
  }
}