Why does adding opacity break 3D CSS animations?

*, * ::before, * ::after {
  transform-style: preserve-3d;
  margin: 0; padding: 0;
  box-sizing: border-box;  
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
html { overflow: hidden; background-color: #eee; }
html, body, main {
  height: 100%;
  color: #999;
  font-family: Arial;
  text-align: center;
  text-transform: uppercase;
}
main, div, div::before, div::after {
  display: flex;
  justify-content: center;
  align-items: center;
}
body {
  perspective: 20rem;
}
div, div::before, div::after {
  position: absolute; transform-origin: center center -5rem;
  width: 10rem; height: 10rem;
  border-style: solid;
  border-color: #ccc;
  border-width: 1rem;
  background-color: rgb( 221, 221, 221, 0.75 );
  opacity: 0.9; /* this is the only line that has changed from the first snippet */  
}

<style>
  div::before {
    transform: rotateX( 90deg ); content: 'top';
  }
  div::after {
    transform: rotateX( -90deg ); content: 'bottom';
  }
  div > div {
    transform: rotateY( 180deg );
    transform-origin: center center center;
  }
  div > div::before {
    transform: rotateY( 90deg ); content: 'right';
  }
  div > div::after {
    transform: rotateY( -90deg ); content: 'left';
  }
  .rotate_y { animation-name: rotate_y; }
  @keyframes rotate_y {
    0% { transform: rotateY( 0deg ); } 100% { transform: rotateY( 360deg ); }
  }
  .rotate_x { animation-name: rotate_x; animation-duration: 200s; }
  @keyframes rotate_x {
    0% { transform: rotateX( 0deg ) scale( 1 ); } 
    100% { transform: rotateX( 360deg ) scale( -6 ); }
  }
</style>

<main class='rotate_x'>
  <div class='rotate_y'>
    front <div>back</div>
  </div>
</main>