html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
  -webkit-font-smoothing:antialiased;
}

/* center container */
.container {
  position: absolute;
  width: 300px;
  height: 300px;
  perspective: 1500px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* cube and faces */
#cube {
  width: 300px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(0);
}

.face {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 0;
  top: 0;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center;
}

/* drag overlay */
#dragger {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  cursor: grab;
  z-index: 9999;
  touch-action: none;
}

/* place each face to form a cube (half depth = 150px) */
.face:nth-child(1) { transform: rotateY(0deg) translateZ(150px); }
.face:nth-child(2) { transform: rotateY(90deg) translateZ(150px); }
.face:nth-child(3) { transform: rotateY(180deg) translateZ(150px); }
.face:nth-child(4) { transform: rotateY(-90deg) translateZ(150px); }
.face:nth-child(5) { transform: rotateX(90deg) translateZ(150px); }
.face:nth-child(6) { transform: rotateX(-90deg) translateZ(150px); }