body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #333;
}
box {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  transition: 400ms;
  perspective: 800;
  background: #111;
}
rotate {
  position: absolute;
  width: 300px;
  height: 500px;
  top: 0; right: 0; left: 0;
  margin: auto;
  animation: rotate 2.5s reverse linear infinite;
}
circle {
  position: absolute;
  width: 300px;
  height: 300px;
  background: white;
  /** border: solid 150px;
  border-color: red blue green yellow; **/
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42863/Quarter_1.jpg);
  background-size: cover;
  border-radius: 50%;
  animation: spin 2.5s linear infinite;
}
box:hover rotate {animation-play-state: paused;border:solid 1px #f00;}
box:active rotate {animation-play-state: running;border:solid 1px #f00;}
@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
@keyframes rotate {
  0% {transform: rotate(0deg) rotateX(40deg);}
  100% {transform: rotate(360deg) rotateX(40deg);}
}

p {
  color: white;
  font-family: helvetica, arial, serif;
  text-align: center;
}