.scene {
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  perspective: 30000px;
}

.cube {
  position:absolute;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(45deg);
}
.side {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 4px solid #222;
  border-radius: 3px;
}
.back {
  transform: translateZ(-100px);
  background: rgba(0,255,0,.7);
}
.left {
  transform: translateX(-100px) rotateY(90deg);
  background: rgba(255,255,0,.7);
}
.right {
  transform: translateX(100px) rotateY(90deg);
  background: rgba(0,0,255,.7);
}
.top {
  transform: translateY(-100px) rotateX(90deg);
  background: rgba(0,255,255,.7);
}
.bottom {
  transform: translateY(100px) rotateX(90deg);
  background: rgba(255,0,255,.7);
}
.front {
  transform: translateZ(100px);
  background: rgba(255,0,0,.7);
}