body {
  margin: 30px 0;
  text-align: center;
  background: #f4f4f4;
}

#play, input[type="radio"] {
  margin-right: 10px;
}

#play:checked ~ .scene .cube {
  animation-name: rotating;
  animation-duration: 20s;
  animation-fill-mode: both;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.scene {
  width: 200px;
  height: 200px;
  margin: 150px auto;
  perspective: 500px;
}

.cube {
  width: inherit;
  height: inherit;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-15deg) rotateY(15deg);
  transition: all 0.85s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

.cube-face {
  width: inherit;
  height: inherit;
  font-size: 120px;
  position: absolute;
  display: flex;
  opacity: .9;
  border-radius: 50%;
  background: #f8f8f8;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.1);
}

.cube-face-front {
  transform: translate3d(0, 0, 100px);
}

.cube-face-back {
  transform: rotateY(180deg) translate3d(0, 0, 100px);
}

.cube-face-left {
  transform: rotateY(-90deg) translate3d(0, 0, 100px);
}

.cube-face-right {
  transform: rotateY(90deg) translate3d(0, 0, 100px);
}

.cube-face-top {
  transform: rotateX(90deg) translate3d(0, 0, 100px);
}

.cube-face-bottom {
  transform: rotateX(-90deg) translate3d(0, 0, 100px);
}

#play:not(:checked) ~ #radio-back:checked ~ .scene .cube {
  transform: rotateX(15deg) rotateY(195deg);
}

#play:not(:checked) ~ #radio-left:checked ~ .scene .cube {
  transform: rotateX(-15deg) rotateY(75deg);
}

#play:not(:checked) ~ #radio-right:checked ~ .scene .cube {
  transform: rotateX(15deg) rotateY(-75deg);
}

#play:not(:checked) ~ #radio-top:checked ~ .scene .cube {
  transform: rotateY(15deg) rotateX(-105deg);
}

#play:not(:checked) ~ #radio-bottom:checked ~ .scene .cube {
  transform: rotateY(-15deg) rotateX(105deg);
}

@keyframes rotating {
  0% {
    transform: rotateX(-15deg) rotateY(15deg);
  }
  2% {
    transform: rotateX(-15deg) rotateY(15deg);
  }
  15% {
    transform: rotateX(15deg) rotateY(195deg);
  }
  17% {
    transform: rotateX(15deg) rotateY(195deg);
  }
  32% {
    transform: rotateX(-15deg) rotateY(75deg);
  }
  34% {
    transform: rotateX(-15deg) rotateY(75deg);
  }
  49% {
    transform: rotateX(15deg) rotateY(-75deg);
  }
  51% {
    transform: rotateX(15deg) rotateY(-75deg);
  }
  66% {
    transform: rotateY(15deg) rotateX(-105deg);
  }
  68% {
    transform: rotateY(15deg) rotateX(-105deg);
  }
  83% {
    transform: rotateY(-15deg) rotateX(105deg);
  }
  85% {
    transform: rotateY(-15deg) rotateX(105deg);
  }
  98% {
    transform: rotateX(-15deg) rotateY(15deg);
  }
  100% {
    transform: rotateX(-15deg) rotateY(15deg);
  }
}