body {
  text-align: center;
  font-family: arial;
  font-size: 6vmin;
  padding: 50px;
}

#scene {
  display: inline-block;
  margin-top: 20vmin;
  width: 40vmin;
  height: 40vmin;

  perspective: 75vmin;
}

#cube {
  position: relative;
  width: inherit;
  height: inherit;

  transform-style: preserve-3d;
  transition: transform 0.6s;
  transform: rotateX(-25deg) rotateY(25deg);
}

.cube-face {
  width: inherit;
  height: inherit;
  position: absolute;
  border-style: solid;
  border-color: #fff;
  border-width: thin;
  opacity: 0.8;
  cursor: pointer;
}
/* faces */
#cube-face-front {
  background: #333;
  transform: translate3d(0, 0, 20vmin);
}
#cube-face-left {
  background: #555;
  transform: rotateY(-90deg) translate3d(0, 0, 20vmin);
}
#cube-face-back {
  background: #999;
  transform: rotateY(180deg) translate3d(0, 0, 20vmin);
}
#cube-face-right {
  background: #777;
  transform: rotateY(90deg) translate3d(0, 0, 20vmin);
}
#cube-face-top {
  background: #bbb;
  transform: rotateX(90deg) translate3d(0, 0, 20vmin);
}
#cube-face-bottom {
  font-size: 4vmin;
  background: #ddd;
  transform: rotateX(-90deg) translate3d(0, 0, 20vmin);
}