body {
  background: #fff;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  height: 100vh;
  overflow: hidden;
}

input {
  display: none;
  top: 0;
}
input:not(:checked) ~ .container .surface:hover ~ .turnLeft {
  visibility: visible;
}
input:checked ~ .container .surface:hover ~ .turnRight {
  visibility: visible;
}
input:checked ~ .container > .surface {
  transform: rotateX(60deg) rotateZ(-45deg);
}

svg {
  position: absolute;
  bottom: 0%;
  left: calc(50% - 59px);
  opacity: 0.5;
  visibility: hidden;
  z-index: 99;
}

.turnRight {
  transform: scale(-1, 1);
}

.container {
  width: 300px;
  height: 315px;
  transform-style: preserve-3d;
}

.surface {
  width: 300px;
  height: 300px;
  margin: auto;
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateZ(45deg);
  transition: transform 0.6s linear;
  will-change: transform;
}

.ball,
.step,
.belt,
.belt-inner {
  transform-style: preserve-3d;
}

.ball,
.ball-shadow,
.ball-layer,
.step-inner div,
.belt,
.belt-inner {
  position: absolute;
}

.ball,
.ball-shadow,
.ball-layer,
.step-inner div {
  width: 50px;
  height: 50px;
}

.ball {
  transform: translate3d(0px, 0px, 126px);
  will-change: transform;
  animation: rollBall 3s linear infinite;
}

.ball-shadow,
.ball-layer {
  border-radius: 50%;
}

.ball-shadow {
  background: radial-gradient(#000 50%, transparent 75%, transparent);
  opacity: 0.4;
  transform: translateZ(-25px);
}

.ball-layer {
  background: #c22;
}
.ball-layer:nth-of-type(1) {
  transform: rotateX(0deg);
}
.ball-layer:nth-of-type(2) {
  transform: rotateX(18deg);
}
.ball-layer:nth-of-type(3) {
  transform: rotateX(36deg);
}
.ball-layer:nth-of-type(4) {
  transform: rotateX(54deg);
}
.ball-layer:nth-of-type(5) {
  transform: rotateX(72deg);
}
.ball-layer:nth-of-type(6) {
  transform: rotateX(90deg);
}
.ball-layer:nth-of-type(7) {
  transform: rotateX(108deg);
}
.ball-layer:nth-of-type(8) {
  transform: rotateX(126deg);
}
.ball-layer:nth-of-type(9) {
  transform: rotateX(144deg);
}
.ball-layer:nth-of-type(10) {
  transform: rotateX(162deg);
}
.ball-layer:nth-of-type(11) {
  transform: rotateY(180deg);
}
.ball-layer:nth-of-type(12) {
  transform: rotateY(198deg);
}
.ball-layer:nth-of-type(13) {
  transform: rotateY(216deg);
}
.ball-layer:nth-of-type(14) {
  transform: rotateY(234deg);
}
.ball-layer:nth-of-type(15) {
  transform: rotateY(252deg);
}
.ball-layer:nth-of-type(16) {
  transform: rotateY(270deg);
}
.ball-layer:nth-of-type(17) {
  transform: rotateY(288deg);
}
.ball-layer:nth-of-type(18) {
  transform: rotateY(306deg);
}
.ball-layer:nth-of-type(19) {
  transform: rotateY(324deg);
}
.ball-layer:nth-of-type(20) {
  transform: rotateY(342deg);
}

.step-inner {
  position: relative;
  width: 50px;
  transform-style: preserve-3d;
  transform: rotateX(-90deg) translateZ(50px);
}

.back {
  transform: translateZ(-50px) rotateY(180deg);
}

.right {
  transform: rotateY(-270deg) translateX(50px);
  transform-origin: top right;
}

.left {
  transform: rotateY(270deg) translateX(-50px);
  transform-origin: center left;
}

.top {
  transform: rotateX(-90deg) translateY(0);
  transform-origin: top center;
}

.front {
  transform: translateZ(0);
}

/* Steps */
.s1 {
  transform: translate3d(0px, 0px, 100px);
}
.s1 .step-inner div.top {
  background: #fff;
}
.s1 .step-inner div.front {
  background: #888;
  height: 100px;
}
.s1 .step-inner div.left, .s1 .step-inner div.right {
  background: #555555;
  height: 100px;
}

.s2 {
  transform: translate3d(0px, 50px, 108.6826347305px);
}
.s2 .step-inner div.top {
  background: #fff;
}
.s2 .step-inner div.front {
  background: #888;
  height: 108.6826347305px;
}
.s2 .step-inner div.left, .s2 .step-inner div.right {
  background: #555555;
  height: 108.6826347305px;
}

.s3 {
  transform: translate3d(0px, 100px, 117.3652694611px);
}
.s3 .step-inner div.top {
  background: #fff;
}
.s3 .step-inner div.front {
  background: #888;
  height: 117.3652694611px;
}
.s3 .step-inner div.left, .s3 .step-inner div.right {
  background: #555555;
  height: 117.3652694611px;
}

.s4 {
  transform: translate3d(0px, 150px, 126.0479041916px);
}
.s4 .step-inner div.top {
  background: #fff;
}
.s4 .step-inner div.front {
  background: #888;
  height: 126.0479041916px;
}
.s4 .step-inner div.left, .s4 .step-inner div.right {
  background: #555555;
  height: 126.0479041916px;
}

.s5 {
  transform: translate3d(0px, 200px, 134.7305389222px);
}
.s5 .step-inner div.top {
  background: #fff;
}
.s5 .step-inner div.front {
  background: #888;
  height: 134.7305389222px;
}
.s5 .step-inner div.left, .s5 .step-inner div.right {
  background: #555555;
  height: 134.7305389222px;
}

.s6 {
  transform: translate3d(0px, 250px, 143.4131736527px);
}
.s6 .step-inner div.top {
  background: #fff;
}
.s6 .step-inner div.front {
  background: #888;
  height: 143.4131736527px;
}
.s6 .step-inner div.left, .s6 .step-inner div.right {
  background: #555555;
  height: 143.4131736527px;
}

.s7 {
  transform: translate3d(50px, 250px, 152.0958083832px);
}
.s7 .step-inner div.top {
  background: #fff;
}
.s7 .step-inner div.front {
  background: #888;
  height: 152.0958083832px;
}
.s7 .step-inner div.left, .s7 .step-inner div.right {
  background: #555555;
  height: 152.0958083832px;
}

.s8 {
  transform: translate3d(100px, 250px, 160.7784431138px);
}
.s8 .step-inner div.top {
  background: #fff;
}
.s8 .step-inner div.front {
  background: #888;
  height: 160.7784431138px;
}
.s8 .step-inner div.left, .s8 .step-inner div.right {
  background: #555555;
  height: 160.7784431138px;
}

.s9 {
  transform: translate3d(150px, 250px, 169.4610778443px);
}
.s9 .step-inner div.top {
  background: #fff;
}
.s9 .step-inner div.front {
  background: #888;
  height: 169.4610778443px;
}
.s9 .step-inner div.left, .s9 .step-inner div.right {
  background: #555555;
  height: 169.4610778443px;
}

.s10 {
  transform: translate3d(200px, 250px, 178.1437125749px);
}
.s10 .step-inner div.top {
  background: #fff;
}
.s10 .step-inner div.front {
  background: #888;
  height: 178.1437125749px;
}
.s10 .step-inner div.left, .s10 .step-inner div.right {
  background: #555555;
  height: 178.1437125749px;
}

.s11 {
  transform: translate3d(250px, 250px, 186.8263473054px);
}
.s11 .step-inner div.top {
  background: #fff;
}
.s11 .step-inner div.front {
  background: #888;
  height: 186.8263473054px;
}
.s11 .step-inner div.left, .s11 .step-inner div.right {
  background: #555555;
  height: 186.8263473054px;
}

.s12 {
  transform: translate3d(250px, 200px, 195.5089820359px);
}
.s12 .step-inner div.top {
  background: #fff;
}
.s12 .step-inner div.front {
  background: #888;
  height: 195.5089820359px;
}
.s12 .step-inner div.left, .s12 .step-inner div.right {
  background: #555555;
  height: 195.5089820359px;
}

.s13 {
  transform: translate3d(250px, 150px, 204.1916167665px);
}
.s13 .step-inner div.top {
  background: #fff;
}
.s13 .step-inner div.front {
  background: #888;
  height: 204.1916167665px;
}
.s13 .step-inner div.left, .s13 .step-inner div.right {
  background: #555555;
  height: 204.1916167665px;
}

.s14 {
  transform: translate3d(200px, 150px, 212.874251497px);
}
.s14 .step-inner div.top {
  background: #fff;
}
.s14 .step-inner div.front {
  background: #888;
  height: 212.874251497px;
}
.s14 .step-inner div.left, .s14 .step-inner div.right {
  background: #555555;
  height: 212.874251497px;
}

.belt {
  width: 192.5px;
  height: 50px;
  transform: translate3d(50px, 0, 91.3173652695px);
}

.belt-inner {
  background-image: linear-gradient(90deg, #666, #333 4px, #888 4px, #888 7px, #333 7px, #666 10px, #666 50px);
  background-position: 0 0;
  background-size: 50px 50px;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  transform: rotateY(-39deg) skewY(38deg);
  animation: runBelt 0.12s linear infinite;
}

@keyframes rollBall {
  from {
    transform: translate3d(0px, 0px, 126px);
  }
  4.2857142857% {
    transform: translate3d(180px, 150px, 247.5568862275px);
  }
  7.1428571429% {
    transform: translate3d(200px, 150px, 238.874251497px);
  }
  11.4285714286% {
    transform: translate3d(230px, 150px, 238.874251497px);
  }
  14.2857142857% {
    transform: translate3d(250px, 150px, 230.1916167665px);
  }
  18.5714285714% {
    transform: translate3d(250px, 180px, 230.1916167665px);
  }
  21.4285714286% {
    transform: translate3d(250px, 200px, 221.5089820359px);
  }
  25.7142857143% {
    transform: translate3d(250px, 230px, 221.5089820359px);
  }
  28.5714285714% {
    transform: translate3d(250px, 250px, 212.8263473054px);
  }
  32.8571428571% {
    transform: translate3d(220px, 250px, 212.8263473054px);
  }
  35.7142857143% {
    transform: translate3d(200px, 250px, 204.1437125749px);
  }
  40% {
    transform: translate3d(170px, 250px, 204.1437125749px);
  }
  42.8571428571% {
    transform: translate3d(150px, 250px, 195.4610778443px);
  }
  47.1428571429% {
    transform: translate3d(120px, 250px, 195.4610778443px);
  }
  50% {
    transform: translate3d(100px, 250px, 186.7784431138px);
  }
  54.2857142857% {
    transform: translate3d(70px, 250px, 186.7784431138px);
  }
  57.1428571429% {
    transform: translate3d(50px, 250px, 178.0958083832px);
  }
  61.4285714286% {
    transform: translate3d(20px, 250px, 178.0958083832px);
  }
  64.2857142857% {
    transform: translate3d(0px, 250px, 169.4131736527px);
  }
  68.5714285714% {
    transform: translate3d(0px, 220px, 169.4131736527px);
  }
  71.4285714286% {
    transform: translate3d(0px, 200px, 160.7305389222px);
  }
  75.7142857143% {
    transform: translate3d(0px, 170px, 160.7305389222px);
  }
  78.5714285714% {
    transform: translate3d(0px, 150px, 152.0479041916px);
  }
  82.8571428571% {
    transform: translate3d(0px, 120px, 152.0479041916px);
  }
  85.7142857143% {
    transform: translate3d(0px, 100px, 143.3652694611px);
  }
  90% {
    transform: translate3d(0px, 70px, 143.3652694611px);
  }
  92.8571428571% {
    transform: translate3d(0px, 50px, 134.6826347305px);
  }
  97.1428571429% {
    transform: translate3d(0px, 20px, 134.6826347305px);
  }
  to {
    transform: translate3d(0px, 0px, 126px);
  }
}
@keyframes runBelt {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 50px 0;
  }
}