.scene {
  width: 200px;
  height: 200px;
  perspective: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 1s;
}
.cube.show-front {
  transform: translateZ(-100px) rotateY(0deg);
}
.cube.show-right {
  transform: translateZ(-100px) rotateY(-90deg);
}
.cube.show-back {
  transform: translateZ(-100px) rotateY(-180deg);
}
.cube.show-left {
  transform: translateZ(-100px) rotateY(90deg);
}
.cube .cube.show-top {
  transform: translateZ(-100px) rotateX(-90deg);
}
.cube.show-bottom {
  transform: translateZ(-100px) rotateX(90deg);
}

.cube-face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  line-height: 200px;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
}
.cube-face.front {
  transform: rotateY(0deg) translateZ(100px);
  background: hsla(0deg, 100%, 50%, 0.7);
}
.cube-face.right {
  transform: rotateY(90deg) translateZ(100px);
  background: hsla(60deg, 100%, 50%, 0.7);
}
.cube-face.back {
  transform: rotateY(180deg) translateZ(100px);
  background: hsla(120deg, 100%, 50%, 0.7);
}
.cube-face.left {
  transform: rotateY(-90deg) translateZ(100px);
  background: hsla(180deg, 100%, 50%, 0.7);
}
.cube-face.top {
  transform: rotateX(90deg) translateZ(100px);
  background: hsla(240deg, 100%, 50%, 0.7);
}
.cube-face.bottom {
  transform: rotateX(-90deg) translateZ(100px);
  background: hsla(300deg, 100%, 50%, 0.7);
}