<div class="perspective">
  
  <input class="toggle" id="btn-spin" type="checkbox">
  <label class="btn" for="btn-spin"></label>
  
  <div class="wrapper">  
    <div class="slot">
      <div class="group">
        <div class="figure"></div>
        <div class="figure"></div>
        <div class="figure"></div>
        <div class="figure"></div>
        <div class="figure"></div>         
      </div>
      <div class="group">
        <div class="figure"></div>
        <div class="figure"></div>
        <div class="figure"></div>
        <div class="figure"></div>
        <div class="figure"></div>       
      </div>
    </div>
    <div class="slot">
      <div class="group">
        <div class="figure"></div>
        <div class="figure"></div>
        <div class="figure"></div>
        <div class="figure"></div>
        <div class="figure"></div>          
      </div>
      <div class="group">
        <div class="figure"></div>
        <div class="figure"></div>
        <div class="figure"></div>
        <div class="figure"></div>
        <div class="figure"></div>        
      </div>
    </div>
    <div class="slot">
      <div class="group">
        <div class="figure"></div>
        <div class="figure"></div>
        <div class="figure"></div>
        <div class="figure"></div>
        <div class="figure"></div>    
      </div>
      <div class="group">
        <div class="figure"></div>
        <div class="figure"></div>
        <div class="figure"></div>
        <div class="figure"></div>
        <div class="figure"></div>  
      </div>
    </div>
  </div>
  
  <div class="header">
    <h1></h1>
    <h2></h2>
  </div>
  
</div>

:root{
  --machine-width: 320px;
  
  --slot-dimension: calc(var(--machine-width) /3);
  
  --spin-steps: steps(5);
  
  --delay-2nd-slot: 100ms;
  --delay-3rd-slot: 200ms;
  
  --perspective: rotateX(21deg);
  --perspective-focus: rotateX(13deg);
  
  --inset-box-shadow: inset 0px 5px 8px 0px rgba(160, 76, 48, 0.13);
  --inset-box-shadow-dark: inset 13px 13px 13px rgba(0,0,0,0.33);
  
  --border-xs: 3%;
  --border-s: 8px;
  --border-xl: 50%;
  --border-irregular: 5px 5px 13px 5px;  
  
  --rgba-white: rgba(255,255,255,1);
  --rgba-slots-bg:  linear-gradient( 0deg, rgba(111,72,72,1) 0%, rgba(135,95,95,1) 50%, rgba(111,72,72,1) 100%);
  --rgba-slots-side: linear-gradient( 0deg, rgba(135,95,95,1) 0%, rgba(111,72,72,1) 50%, rgba(135,95,95,1) 100%);
  --rgba-mix-bright-pink: linear-gradient( 54deg, rgba(246,151,162,1) 0%, rgba(228,156,167,1) 100%);
  --rgba-mix-dark-pink: linear-gradient( 54deg, rgba(219,125,155,1) 0%, rgba(207,122,117,1) 100%);
  --rgba-mix-sand: linear-gradient( 54deg, rgba(229,168,158,1) 0%, rgba(215,160,124,1) 100%);
  --rgba-mix-glass: linear-gradient( to right, rgba(229,168,158,0) 0%, rgba(229,168,158,.89) 50%, rgba(229,168,158,0.21) 100%);
  --rgba-mix-bg: linear-gradient( 54deg, rgba(186,128,76,1) 0%, rgba(211,65,168,1) 100%);
  --rgba-mix-light:  linear-gradient( 21deg, rgba(186,128,76,1) 0%, rgba(224,107,120,1) 50%, rgba(211,65,168,1) 100%);
}

*,
*:before,
*:after{
  margin: 0;
  padding: 0;
}

*:before,
*:after{
  content: '';
}

body{
  perspective: 600px;
  background: var(--rgba-mix-bg);
  overflow: hidden;
}

body,
.perspective{  
  width: 100vw; height: 100vh;
  color: var(--rgba-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
}

.perspective{
  transform: var(--perspective);
  max-width: 640px; max-height: 480px;
  min-height: 380px;
}

body:before{
  width: 150%; height: 150%;
  background: var(--rgba-mix-light);
  position: fixed;
  animation: animPulse 12s linear infinite;
  transform-origin: top center;
  transform: translate3d(0,0,-100px);
}

.wrapper{
  width: var(--machine-width); height: 220px;
  background: var(--rgba-slots-bg);
  display: flex;
  justify-content: center; 
  position: relative; 
  overflow: hidden;
  box-shadow: var(--inset-box-shadow-dark);
  border-radius: var(--border-xs);
  outline: 1px solid transparent;
  transform-style: preserve-3d;
  transition: transform 100ms ease-out;
  transform-origin: bottom;
  transform: rotateX(8deg) scale(.98);
}

.wrapper:after{
  width: 100%; height: 40%;
  position: absolute;
  top: 26%; left: 0;
  z-index: -1;
  background: var(--rgba-mix-glass);
  opacity: 0.13;
  animation: animHighlight 400ms ease 1 alternate;
}

.wrapper:after{
  right: -13px;
}

.header{
  display: flex;
  align-items: center; 
  flex-direction: column;
}

h1{
  transform-style: preserve-3d;
  display: flex;
  margin-bottom: 5px;
  animation: animFloat 5s linear infinite;
}

h1:after{
    box-shadow:  15px 10px 0 #fce5d2, 20px 10px 0 #fce5d2, 25px 10px 0 #fce5d2, 40px 10px 0 #fce5d2, 55px 10px 0 #fce5d2, 70px 10px 0 #fce5d2, 90px 10px 0 #fce5d2, 110px 10px 0 #fce5d2, 115px 10px 0 #fce5d2, 120px 10px 0 #fce5d2, 135px 10px 0 #fce5d2, 140px 10px 0 #fce5d2, 145px 10px 0 #fce5d2, 160px 10px 0 #fce5d2, 165px 10px 0 #fce5d2, 170px 10px 0 #fce5d2, 10px 15px 0 #fce5d2, 40px 15px 0 #fce5d2, 55px 15px 0 #fce5d2, 70px 15px 0 #fce5d2, 75px 15px 0 #fce5d2, 90px 15px 0 #fce5d2, 105px 15px 0 #fce5d2, 135px 15px 0 #fce5d2, 165px 15px 0 #fce5d2, 15px 20px 0 #fce5d2, 20px 20px 0 #fce5d2, 40px 20px 0 #fce5d2, 55px 20px 0 #fce5d2, 70px 20px 0 #fce5d2, 80px 20px 0 #fce5d2, 90px 20px 0 #fce5d2, 110px 20px 0 #fce5d2, 115px 20px 0 #fce5d2, 135px 20px 0 #fce5d2, 140px 20px 0 #fce5d2, 145px 20px 0 #fce5d2, 165px 20px 0 #fce5d2, 25px 25px 0 #fce5d2, 40px 25px 0 #fce5d2, 55px 25px 0 #fce5d2, 70px 25px 0 #fce5d2, 85px 25px 0 #fce5d2, 90px 25px 0 #fce5d2, 120px 25px 0 #fce5d2, 135px 25px 0 #fce5d2, 165px 25px 0 #fce5d2, 10px 30px 0 #fce5d2, 15px 30px 0 #fce5d2, 20px 30px 0 #fce5d2, 45px 30px 0 #fce5d2, 50px 30px 0 #fce5d2, 70px 30px 0 #fce5d2, 90px 30px 0 #fce5d2, 105px 30px 0 #fce5d2, 110px 30px 0 #fce5d2, 115px 30px 0 #fce5d2, 135px 30px 0 #fce5d2, 140px 30px 0 #fce5d2, 145px 30px 0 #fce5d2, 165px 30px 0 #fce5d2;
  width: 5px; 
  height: 5px;
  transform: scale(.55) skewY(-3deg) translate3d(-80px, -30px, 0);
}

h2{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 55px;
}

h2:after{
  box-shadow:  40px 40px 0 #ffffff, 60px 40px 0 #ffffff, 180px 40px 0 #ffffff, 200px 40px 0 #ffffff, 220px 40px 0 #ffffff, 320px 40px 0 #ffffff, 340px 40px 0 #ffffff, 360px 40px 0 #ffffff, 520px 40px 0 #ffffff, 540px 40px 0 #ffffff, 560px 40px 0 #ffffff, 640px 40px 0 #ffffff, 780px 40px 0 #ffffff, 800px 40px 0 #ffffff, 900px 40px 0 #ffffff, 920px 40px 0 #ffffff, 940px 40px 0 #ffffff, 1040px 40px 0 #ffffff, 1060px 40px 0 #ffffff, 1080px 40px 0 #ffffff, 20px 60px 0 #ffffff, 80px 60px 0 #ffffff, 160px 60px 0 #ffffff, 300px 60px 0 #ffffff, 500px 60px 0 #ffffff, 640px 60px 0 #ffffff, 760px 60px 0 #ffffff, 820px 60px 0 #ffffff, 920px 60px 0 #ffffff, 1020px 60px 0 #ffffff, 20px 80px 0 #ffffff, 180px 80px 0 #ffffff, 200px 80px 0 #ffffff, 320px 80px 0 #ffffff, 340px 80px 0 #ffffff, 520px 80px 0 #ffffff, 540px 80px 0 #ffffff, 640px 80px 0 #ffffff, 760px 80px 0 #ffffff, 820px 80px 0 #ffffff, 920px 80px 0 #ffffff, 1040px 80px 0 #ffffff, 1060px 80px 0 #ffffff, 20px 100px 0 #ffffff, 80px 100px 0 #ffffff, 220px 100px 0 #ffffff, 360px 100px 0 #ffffff, 560px 100px 0 #ffffff, 640px 100px 0 #ffffff, 760px 100px 0 #ffffff, 820px 100px 0 #ffffff, 920px 100px 0 #ffffff, 1080px 100px 0 #ffffff, 40px 120px 0 #ffffff, 60px 120px 0 #ffffff, 160px 120px 0 #ffffff, 180px 120px 0 #ffffff, 200px 120px 0 #ffffff, 300px 120px 0 #ffffff, 320px 120px 0 #ffffff, 340px 120px 0 #ffffff, 500px 120px 0 #ffffff, 520px 120px 0 #ffffff, 540px 120px 0 #ffffff, 640px 120px 0 #ffffff, 660px 120px 0 #ffffff, 680px 120px 0 #ffffff, 780px 120px 0 #ffffff, 800px 120px 0 #ffffff, 920px 120px 0 #ffffff, 1020px 120px 0 #ffffff, 1040px 120px 0 #ffffff, 1060px 120px 0 #ffffff;
  width: 20px; 
  height: 20px;
  transform: scale(.2) translateX(-540px);
}

.slot{
  width: var(--slot-dimension);
  height: auto;
  margin: 0;
  margin-top: -700px;
  position: relative;
}

.group{
  animation: animSpin 600ms var(--spin-steps) infinite running; 
  transform-style: flat;
}

.group:before,
.group:after{
  display: block;
  outline: 1px solid transparent;
}

.slot:first-of-type > .group:before,
.slot:last-of-type > .group:before{
  width: 8px;
  height: 101%;
  left: -1px;
  position: absolute;
  background: var(--rgba-slots-side);
  z-index: 2;
}

.slot:last-of-type > .group:before{
  left: auto;
  right: -1px;
  background: var(--rgba-slots-side);
}


.slot:nth-of-type(2) > .group{
  animation-delay: var(--delay-2nd-slot);
  animation-duration: 700ms;
}

.slot:nth-of-type(3) > .group{
  animation-delay: var(--delay-3rd-slot);
  animation-duration: 800ms;
}

.figure{
  height: var(--slot-dimension);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.figure:nth-of-type(1){
  border-radius: var(--border-xs);
}

.figure:after,
.figure:before{
  border-radius: var(--border-xs);
  width: calc(var(--slot-dimension) * 0.5);
  height: calc(var(--slot-dimension) * 0.5);
  position: absolute;
  box-shadow: var(--inset-box-shadow);
}

.figure:nth-of-type(1):before,
.figure:nth-of-type(1):after{
 transform: translateX(-30px) translateY(-30px);
}

.figure:nth-of-type(1):before{
  box-shadow:  20px 10px 0 #ffffff, 30px 10px 0 #ffffff, 40px 10px 0 #ffffff, 50px 10px 0 #ffffff, 50px 20px 0 #ffffff, 40px 30px 0 #ffffff, 30px 40px 0 #ffffff, 30px 50px 0 #ffffff;
  height: 10px;
  width: 10px;
}

.figure:nth-of-type(1):after{
  box-shadow:  20px 10px 0 #e7a5a8, 30px 10px 0 #eba3b3, 40px 10px 0 #f0a1c2, 50px 10px 0 #eda2ba, 50px 20px 0 #eba3b3, 40px 30px 0 #e7a5a8, 30px 40px 0 #e2a899, 30px 50px 0 #d9a084;
  height: 10px;
  width: 10px;
}

.figure:nth-of-type(2):before,
.figure:nth-of-type(2):after{
  border-radius: var(--border-xl);
}

.figure:nth-of-type(2):before{
  background: var(--rgba-mix-sand);
}

.figure:nth-of-type(2):after{
  transform: scale(.67);
  background: var(--rgba-mix-dark-pink);
}

.figure:nth-of-type(3):before{
  border-radius: var(--border-s);
  background: var(--rgba-mix-sand);
}

.figure:nth-of-type(3):after{
  border-radius: var(--border-s);
  background: var(--rgba-mix-dark-pink);
  transform: scale(.67);
}

.figure:nth-of-type(4):before{
  transform-origin: center;
  background: var(--rgba-mix-sand);
}

.figure:nth-of-type(4):after{
  transform: rotateZ(-45deg);
  box-sizing: border-box;
  background: var(--rgba-mix-bright-pink);
  border: 8px solid;
  border-color: #e6a2ad #db919d #dda191 #d7a07c;
  box-shadow: none;
}

.figure:nth-of-type(5):before{
  border-radius: var(--border-s);
  background: var(--rgba-mix-sand);
  transform: rotateZ(45deg);
}

.figure:nth-of-type(5):after{
  border-radius: var(--border-s);
  background: var(--rgba-mix-dark-pink);
  transform: scale(.67) rotateZ(45deg);
}

.toggle{
  position: absolute;
  opacity: 0;
  top: -55px;
  left: -55px;
}

.btn{
  width: 120px;
  height: 50px;
  position: relative;
  color: #fff;
  cursor: pointer;
  border-radius: var(--border-irregular);
  background: var(--rgba-mix-bright-pink);
  animation: animBounce 189ms linear forwards infinite reverse running;
  margin-top: 34px;
  animation-steps:  var(--spin-steps);
  backface-visibility: hidden;
  outline: 1px solid transparent;
  -webkit-tap-highlight-color: transparent;
}

.btn:before,
.btn:after{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 5px 5px 13px 5px;
}

.btn:before{
  border-radius: 0;
  box-shadow:  30px 20px 0 #ffffff, 40px 20px 0 #ffffff, 50px 20px 0 #ffffff, 80px 20px 0 #ffffff, 90px 20px 0 #ffffff, 100px 20px 0 #ffffff, 140px 20px 0 #ffffff, 170px 20px 0 #ffffff, 210px 20px 0 #ffffff, 20px 30px 0 #ffffff, 80px 30px 0 #ffffff, 110px 30px 0 #ffffff, 140px 30px 0 #ffffff, 170px 30px 0 #ffffff, 180px 30px 0 #ffffff, 210px 30px 0 #ffffff, 30px 40px 0 #ffffff, 40px 40px 0 #ffffff, 80px 40px 0 #ffffff, 90px 40px 0 #ffffff, 100px 40px 0 #ffffff, 140px 40px 0 #ffffff, 170px 40px 0 #ffffff, 190px 40px 0 #ffffff, 210px 40px 0 #ffffff, 50px 50px 0 #ffffff, 80px 50px 0 #ffffff, 140px 50px 0 #ffffff, 170px 50px 0 #ffffff, 200px 50px 0 #ffffff, 210px 50px 0 #ffffff, 20px 60px 0 #ffffff, 30px 60px 0 #ffffff, 40px 60px 0 #ffffff, 80px 60px 0 #ffffff, 140px 60px 0 #ffffff, 170px 60px 0 #ffffff, 210px 60px 0 #ffffff;
  height: 10px;
  width: 10px;
  transform: translateX(11px) scale(.375);
  opacity: 1;
}

.btn:after{
  border-radius: 0;
  box-shadow:  30px 20px 0 #ffffff, 40px 20px 0 #ffffff, 50px 20px 0 #ffffff, 80px 20px 0 #ffffff, 90px 20px 0 #ffffff, 100px 20px 0 #ffffff, 140px 20px 0 #ffffff, 150px 20px 0 #ffffff, 190px 20px 0 #ffffff, 200px 20px 0 #ffffff, 210px 20px 0 #ffffff, 20px 30px 0 #ffffff, 90px 30px 0 #ffffff, 130px 30px 0 #ffffff, 160px 30px 0 #ffffff, 190px 30px 0 #ffffff, 220px 30px 0 #ffffff, 30px 40px 0 #ffffff, 40px 40px 0 #ffffff, 90px 40px 0 #ffffff, 130px 40px 0 #ffffff, 160px 40px 0 #ffffff, 190px 40px 0 #ffffff, 200px 40px 0 #ffffff, 210px 40px 0 #ffffff, 50px 50px 0 #ffffff, 90px 50px 0 #ffffff, 130px 50px 0 #ffffff, 160px 50px 0 #ffffff, 190px 50px 0 #ffffff, 20px 60px 0 #ffffff, 30px 60px 0 #ffffff, 40px 60px 0 #ffffff, 90px 60px 0 #ffffff, 140px 60px 0 #ffffff, 150px 60px 0 #ffffff, 190px 60px 0 #ffffff;
  height: 10px;
  width: 10px;
  opacity: 0;
  transform: translateX(11px) scale(.375);
}

#btn-spin:not(:checked) ~ .wrapper > .slot > .group{
  animation-play-state: paused;
}

#btn-spin:not(:checked) + .btn{
  animation-play-state: paused;
}

#btn-spin:checked + .btn:before{
  opacity:0;
  animation: btnSpinHide 300ms ease;
}

#btn-spin:checked + .btn:after{
  opacity:1;
  animation: btnStopShow 300ms ease;
}

#btn-spin:not(:checked) ~ .wrapper{
  transform: none;
}

#btn-spin:checked ~ .wrapper:after{
  animation-name: none;
}

@keyframes animSpin{
  0%{
    transform: translateY(0%);
  }
  100%{
    transform: translateY(100%);
  }
}

@keyframes animBounce{
  0%{
    transform: rotateX(21deg);
  }
  50%{
   transform: translateY(3px) scaleX(.98) scaleY(1.02) rotateX(25deg);
  }
  100%{
    transform: translateY(-1px) rotateX(21deg);
  }
}

@keyframes animFloat{
  0%{
    transform: translateY(0);
  }
  25%{
    transform: translateY(5px);
  }
  50%{
    transform: translateY(0);
  }
  75%{
    transform: translateY(-5px);
  }
  100%{
    transform: translateY(0);
  }
}

@keyframes animPulse{
  0%,25%{
    opacity:0;
  }
  50%{
   opacity: .89;
  }
  100%{
    opacity: 0;
  }
}

@keyframes animHighlight{
  0%{
    opacity: 0.13;
  } 
  55%{
    opacity: .34;
  }
  100%{
    opacity: 0.13;
  }
}

@media screen and (max-height: 440px){
  .perspective{
  transform: scale(.67) var(--perspective);
  }
}

/*
Note: Main animations don't work on Safari, both iOS and macOS. animation-play-state does not seem to work with 3d transforms. Appears to be the issue described here: https://css-tricks.com/forums/topic/css3-translate3d-animations-cannot-be-stopped-when-running-ios-safari/ 
*/