Why does copy and pasting working code into codepen not work?

Question

I have tried to follow along with one of Kevin Powell's videos to make a 3d animation of a ball bouncing on a cube. Ultimately, even if I copy it word for word, it never renders properly and I have to search for solution after solution to many individual problems. Finally I found Kevin Powell's project on Codepen.io and just copied and pasted to test a theory. All I see is the ball and no animation and no cube. I have to use things like (transform-style: inherit) in the elements that need transforming just to get them to render well before animation happens. In my own program I am simply running into too many problems to get answers so I'm just hoping that knowing why putting the completed code into my browser through copy and paste will help shed some light on the situation as a whole.

:root {
  --boxColor: #0ff7;
  --rotateSpeed: 45s;
  --bounceSpeed: 1.5s;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: #000;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 75px;
  
  perspective: 10em;
  perspective-origin:
    50% calc(50% - 3em);
  
  overflow: hidden;
}

.scene {
  position: relative;
  transform-style: preserve-3d;
  
  animation:
    sceneRotate
    var(--rotateSpeed)
    infinite linear;
  
  @keyframes sceneRotate {
    to { transform: rotateY(360deg) }    
  }
}

.ball {
  height: 1em;
  width: 1em;
  border-radius: 100%;
  
  position: absolute;
  left: -0.5em;
  bottom: 1em;
  
  background-color: #0a1;
  background-image:
    radial-gradient(
      circle at top,
      #fff9 0%,
      #fff0 50%
    ),
    radial-gradient(
      circle at top,
      #0000 50%,
      #000d 100%
    );
  
  background-blend-mode:
    screen,
    multiply;

  animation:
    ballBounce
    var(--bounceSpeed)
    infinite
    cubic-bezier(0.33333, 0.66667, 0.66667, 1),
    sceneRotate
    var(--rotateSpeed)
    infinite linear reverse;
  
  @keyframes ballBounce {
    0%, 100% {
      bottom: 0em;
    }
    
    50% {
      bottom: 3em;
      animation-timing-function:
        cubic-bezier(0.33333, 0, 0.66667, 0.33333);
    }
  };
 }

.cube {  
  width: 2em;
  height: 2em;
  
  position: absolute;
  bottom: -1em;
  left: -1em;

  transform-style: preserve-3d;
  
  animation: cubeHeight
    var(--bounceSpeed) infinite linear;
  
  @keyframes cubeHeight {
    0%, 100% {
      height: 1.5em;
    }

    6.5%, 93.5% {
      height: 2em;
    }
}

  .front, .back,
  .left, .right {
    line-height: 2em;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: var(--boxColor);
    box-shadow: 0 0 0.5em #000a inset;
    // border: 0.05em solid var(--boxColor);
  }
  
  .front {
    transform: translateZ(1em);
  }
  
  .right {
    transform:
      rotateY(90deg)
      translateZ(1em);
  }
  
  .back {
    transform:
      rotateY(180deg)
      translateZ(1em);
  }
  
  .left {
    transform:
      rotateY(270deg)
      translateZ(1em);
  }
  
  .top, .bottom {
    line-height: 2em;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    width: 2em;
    height: 2em;
    box-shadow: 0 0 0.5em #000a inset;
    // border: 0.05em solid var(--boxColor);
  }

  .top {
    overflow: hidden;
    background-color: var(--boxColor);
    transform:
      translateY(-50%)
      rotateX(90deg);
  }
  
  .bottom {
    box-shadow: 0 0 0.75em #000c;
    transform:
      translateY(50%)
      rotateX(-90deg);
  }
}

.ball-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(
      circle at center,
      #0009 0%,
      #0000 85%
    );

  animation:
    ballShadow
    var(--bounceSpeed)
    infinite ease-out;
  
  @keyframes ballShadow {
    0%, 6.5%, 93.5%, 100% {
      transform: scale(100%);
      opacity: 100%;
    }
    
    50% {
      transform: scale(180%);
      opacity: 70%;
      animation-timing-function: ease-in;
    }
  }
}

.floor {
  width: 15em;
  height: 15em;
  background-color: lightgreen;
  background-image:
    radial-gradient(#0000, #000 75%),
    repeating-conic-gradient(
      from 45deg,
      #111 0deg 90deg,
      #222 90deg 180deg
    );
  background-size: 100%, 1em 1em;
  background-blend-mode: multiply;
  
  position: absolute;
  top: 1em;
  transform:
    translate(-50%, -50%)
    rotateX(90deg);
}

<div class="scene">
  <div class="floor"></div>
  <div class="cube">
    <div class="front"></div>
    <div class="back"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="top">
      <div class="ball-shadow"></div>
    </div>
    <div class="bottom"></div>
  </div>
  <div class="ball"></div>
</div>