$sqSize: 50px
$xSpaces: 6
$ySpaces: 6
$ballColor: #c22
$ballLayers: 20
$ballDur: 3s
$stepColor1: #fff
$stepColor2: #888
$steps: 14
$stepInc: 1 / ($steps / (2 + 1 / $steps) - 1)
$stepPer: 100% / $steps
$firstStepH: 2

@mixin placeBall($x, $y, $z)
  transform: translate3d($sqSize*($x - 1), $sqSize*($y - 1), ($sqSize*$z)+($sqSize/2)+1)
  
@mixin placeStep($x, $y, $z, $h)
  transform: translate3d($sqSize*($x - 1), $sqSize*($y - 1), ($sqSize*$z) + ($sqSize*($h - 1)))
  .step-inner div
    &.top
      background: $stepColor1
    &.front
      background: $stepColor2
      height: $sqSize * $h
    &.left, &.right
      background: $stepColor2 - #333
      height: $sqSize * $h

body
  background: #000
  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
  &:not(:checked)
    ~ .container .surface:hover ~ .turnLeft
      visibility: visible
  &:checked
    ~ .container .surface:hover ~ .turnRight
      visibility: visible
    ~ .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: $sqSize * $xSpaces
  height: $sqSize * $ySpaces + 15px
  transform-style: preserve-3d
  
.surface
  //background-image: repeating-linear-gradient(transparent, transparent $sqSize - 1, #fff $sqSize - 1, #fff $sqSize), repeating-linear-gradient(90deg, transparent, transparent $sqSize - 1, #fff $sqSize - 1, #fff $sqSize)
  width: $sqSize * $xSpaces
  height: $sqSize * $ySpaces
  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: $sqSize
  height: $sqSize
  
.ball
  @include placeBall(1,1,$firstStepH)
  will-change: transform
  animation: rollBall $ballDur linear infinite
  
.ball-shadow,
.ball-layer
  border-radius: 50%
  
.ball-shadow
  background: radial-gradient(#000 50%, transparent 75%, transparent)
  opacity: 0.4
  transform: translateZ(-$sqSize/2)
  
.ball-layer
  background: $ballColor
  @for $b from 1 through $ballLayers
    &:nth-of-type(#{$b})
      @if $b <= ($ballLayers / 2)
        transform: rotateX(360deg/$ballLayers * ($b - 1))
      @else
        transform: rotateY(360deg/$ballLayers * ($b - 1))
  
.step-inner
  position: relative
  width: $sqSize
  transform-style: preserve-3d
  transform: rotateX(-90deg) translateZ($sqSize)
  
.back
  transform: translateZ(-$sqSize) rotateY(180deg)
.right
  transform: rotateY(-270deg) translateX($sqSize)
  transform-origin: top right
.left
  transform: rotateY(270deg) translateX(-$sqSize)
  transform-origin: center left
.top
  transform: rotateX(-90deg) translateY(0)
  transform-origin: top center
.front
  transform: translateZ(0)
    
/* Steps */
.s1
  @include placeStep(1, 1, 1, $firstStepH)
.s2
  @include placeStep(1, 2, 1, $firstStepH + $stepInc)
.s3
  @include placeStep(1, 3, 1, $firstStepH + $stepInc * 2)
.s4
  @include placeStep(1, 4, 1, $firstStepH + $stepInc * 3)
.s5
  @include placeStep(1, 5, 1, $firstStepH + $stepInc * 4)
.s6
  @include placeStep(1, 6, 1, $firstStepH + $stepInc * 5)
.s7
  @include placeStep(2, 6, 1, $firstStepH + $stepInc * 6)
.s8
  @include placeStep(3, 6, 1, $firstStepH + $stepInc * 7)
.s9
  @include placeStep(4, 6, 1, $firstStepH + $stepInc * 8)
.s10
  @include placeStep(5, 6, 1, $firstStepH + $stepInc * 9)
.s11
  @include placeStep(6, 6, 1, $firstStepH + $stepInc * 10)
.s12
  @include placeStep(6, 5, 1, $firstStepH + $stepInc * 11)
.s13
  @include placeStep(6, 4, 1, $firstStepH + $stepInc * 12)
.s14
  @include placeStep(5, 4, 1, $firstStepH + $stepInc * 13)
    
.belt
  width: $sqSize*3.85
  height: $sqSize
  transform: translate3d($sqSize,0,($sqSize*2) - ($sqSize*$stepInc))
  
.belt-inner
  background-image: linear-gradient(90deg,#666,#333 4px, #888 4px, #888 7px, #333 7px, #666 10px, #666 $sqSize)
  background-position: 0 0
  background-size: $sqSize $sqSize
  width: 100%
  height: 100%
  transform-origin: 0 0
  transform: rotateY(-39deg) skewY(38deg)
  animation: runBelt $ballDur/25 linear infinite
    
@keyframes rollBall
  from
    @include placeBall(1,1,$firstStepH)
  #{$stepPer*0.6}
    @include placeBall(4.6,4,$firstStepH + $stepInc * 14)
  #{$stepPer*1}
    @include placeBall(5,4,$firstStepH + $stepInc * 13)
  #{$stepPer*1.6}
    @include placeBall(5.6,4,$firstStepH + $stepInc * 13)
  #{$stepPer*2}
    @include placeBall(6,4,$firstStepH + $stepInc * 12)
  #{$stepPer*2.6}
    @include placeBall(6,4.6,$firstStepH + $stepInc * 12)
  #{$stepPer*3}
    @include placeBall(6,5,$firstStepH + $stepInc * 11)
  #{$stepPer*3.6}
    @include placeBall(6,5.6,$firstStepH + $stepInc * 11)
  #{$stepPer*4}
    @include placeBall(6,6,$firstStepH + $stepInc * 10)
  #{$stepPer*4.6}
    @include placeBall(5.4,6,$firstStepH + $stepInc * 10)
  #{$stepPer*5}
    @include placeBall(5,6,$firstStepH + $stepInc * 9)
  #{$stepPer*5.6}
    @include placeBall(4.4,6,$firstStepH + $stepInc * 9)
  #{$stepPer*6}
    @include placeBall(4,6,$firstStepH + $stepInc * 8)
  #{$stepPer*6.6}
    @include placeBall(3.4,6,$firstStepH + $stepInc * 8)
  #{$stepPer*7}
    @include placeBall(3,6,$firstStepH + $stepInc * 7)
  #{$stepPer*7.6}
    @include placeBall(2.4,6,$firstStepH + $stepInc * 7)
  #{$stepPer*8}
    @include placeBall(2,6,$firstStepH + $stepInc * 6)
  #{$stepPer*8.6}
    @include placeBall(1.4,6,$firstStepH + $stepInc * 6)
  #{$stepPer*9}
    @include placeBall(1,6,$firstStepH + $stepInc * 5)
  #{$stepPer*9.6}
    @include placeBall(1,5.4,$firstStepH + $stepInc * 5)
  #{$stepPer*10}
    @include placeBall(1,5,$firstStepH + $stepInc * 4)
  #{$stepPer*10.6}
    @include placeBall(1,4.4,$firstStepH + $stepInc * 4)
  #{$stepPer*11}
    @include placeBall(1,4,$firstStepH + $stepInc * 3)
  #{$stepPer*11.6}
    @include placeBall(1,3.4,$firstStepH + $stepInc * 3)
  #{$stepPer*12}
    @include placeBall(1,3,$firstStepH + $stepInc * 2)
  #{$stepPer*12.6}
    @include placeBall(1,2.4,$firstStepH + $stepInc * 2)
  #{$stepPer*13}
    @include placeBall(1,2,$firstStepH + $stepInc)
  #{$stepPer*13.6}
    @include placeBall(1,1.4,$firstStepH + $stepInc)
  to
    @include placeBall(1,1,$firstStepH)
      
@keyframes runBelt
  from
    background-position: 0 0
  to
    background-position: $sqSize 0