<!-- Auteur: Simon Arnold -->
<div class="multiplane">
  <div class="wrapper">
    <img src="https://assets.codepen.io/9367036/wd1.png" class="layer depth-4">
    <img src="https://assets.codepen.io/9367036/wd2.png" class="layer depth-3">
    <img src="https://assets.codepen.io/9367036/wd3.png" class="layer depth-2">
    <img src="https://assets.codepen.io/9367036/wd4.png" class="layer depth-1">
  </div>
</div>

<nav class="nav">
  <button class="btn btn-45"></button>
  <button class="btn btn-play-pause fas fa-pause"></button>
</nav>

$perspective: 650;
$depthStep: 200;
$totalDepthLevels: 3;
$zoomIn: 300;
$duration: 5s;

@for $i from 0 through $totalDepthLevels {
  $depthStart: $i * $depthStep * -1;
  $depthEnd: $zoomIn / ($i + 1) + $depthStart;
  $scale: 1 + $depthStart * -1 / $perspective;
  
  .depth-#{$i + 1} {
    transform: translateZ(#{$depthStart}px) scale($scale);
    animation: depth-anim-#{$i + 1} $duration alternate infinite;
  }
  
  @keyframes depth-anim-#{$i + 1} {
    from { transform: translateZ(#{$depthStart}px) scale($scale); }
    to { transform: translateZ(#{$depthEnd}px) scale($scale); }
  }
}

* { box-sizing: border-box; }

html,
body {
  height: 100%;
  margin: 0;
  background: #1F2128;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.multiplane {
  position: relative;
  width: 100vw;
  aspect-ratio: 4 / 3;
  perspective: #{$perspective}px;
  overflow: hidden;
  transition: perspective 0.3s;
  
  .is-angle & { overflow: visible; }
  .has-no-perspective & { perspective: 0; }
}

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0) rotateY(0deg);
  transition: transform 0.3s;
  transform-style: preserve-3d;
  
  .is-angle & {
    transform: translate3d(50%, 0, -800px) rotateY(45deg)
  }
}

.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform-style: preserve-3d;
  
  .is-paused & { animation-play-state: paused; }
}

.nav {
  position: fixed;
  display: flex;
  justify-content: space-evenly;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: clamp(12px, 2.5vmin, 22px);
  padding: 1em 0;
}

.btn {
  display: block;
  background-color: rgba(white, 0.15);
  padding: 0.5em 1.5em;
  border-radius: 1.5em;
  border: 0;
  min-width: 80px;
  text-decoration: none;
  text-align: center;
  color: white;
  
  &:hover { background-color: rgba(white, 0.3);}
}

.fa-youtube { font-size: 1.25em; }

.btn-45 {
  font-weight: bold;

  &::before { content: '45°'; }
  
  .is-angle & {
    &::before { content: '0°'; }
  }
}

const btn45 = document.querySelector('.btn-45');
const btnPlayPause = document.querySelector('.btn-play-pause');

btn45.addEventListener('click', function() {
  document.body.classList.toggle('is-angle');
});

btnPlayPause.addEventListener('click', function() {
  document.body.classList.toggle('is-paused');
  btnPlayPause.classList.toggle('fa-play');
  btnPlayPause.classList.toggle('fa-pause');
});