.cube-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding-right: 50px;
  height: 60px;
  perspective: 360px;
  position: relative;
  width: 360px;
}

.unspun {
  transform-style: preserve-3d;
  transform: rotateX(0deg);
  transition: transform 2s;
}

.spun {
  transform-style: preserve-3d;
  transform: rotateX(360deg);
  transition: transform 2s;
}

side {
  border: 1px solid #fff;
  font-family: monospace;
  font-size: 100px;
  text-align: center;
  line-height: 180px;
  height: 50px;
  position: absolute;
  width: 50px;
}

.front  {
  transform: rotateY(0deg) translateZ(25px);
}

.back   {
  transform: rotateX(180deg) translateZ(25px);
}

.right  {
  transform: rotateY(90deg) translateZ(25px);
}

.left   {
  transform: rotateY(-90deg) translateZ(25px);
}

.top    {
  transform: rotateX(90deg) translateZ(25px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(25px);
}

@media screen and (max-width: 374px) {
  .cube-container {
    transform: translateY(-112px);
    width: 260px;
  }
}