CSS3 3D-преобразования

Question

Я наткнулся на этот код HTML / CSS3 для эффекта вращения куба 3D-преобразования CSS3, написанный в 2012 году (см .: http://www.inwebson.com/css3/css3-3d-transforms-animation-cube-rotation/).

Я настроил его как ручку: https://codepen.io/Ben10/pen/MGbYEe

body {
  margin: 0;
  padding: 0;
}

section {
  display: block;
}

#wrapper {
  width: 600px;
  margin: 200px auto 100px;
  position: relative;
}


/*** View Stage ***/

#viewStage {
  width: 450px;
  height: 300px;
  margin: 5em auto;
  -webkit-perspective: 450px;
  -webkit-perspective-origin: 50% 50%;
}


/*** Keyframes ***/

@-webkit-keyframes rotation {
  from,
  to {}
  10%,
  25% {
    -webkit-transform: rotateX(-90deg);
  }
  35%,
  50% {
    -webkit-transform: rotateX(-180deg);
  }
  60%,
  75% {
    -webkit-transform: rotateX(-270deg);
  }
  85%,
  100% {
    -webkit-transform: rotateX(-360deg);
  }
}

@-moz-keyframes rotation {
  from,
  to {}
  10%,
  25% {
    -moz-transform: translateY(0px);
  }
  35%,
  50% {
    -moz-transform: translateY(-300px);
  }
  60%,
  75% {
    -moz-transform: translateY(-600px);
  }
  85%,
  100% {
    -moz-transform: translateY(-900px);
  }
}


/*** Cube ***/

.cube {
  position: relative;
  float: left;
  width: 150px;
  height: 300px;
  /* Transform */
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
  /* Animation */
  -webkit-animation-name: rotation;
  -webkit-animation-timing-function: ease;
  -webkit-animation-timing-function: cubic-bezier(0.6, -1, 0.4, 1.5);
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 15s;
  -moz-animation-name: rotation;
  -moz-animation-timing-function: ease;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 15s;
}


/* Cube delay and z-index fix */

#cube1 {
  z-index: 1;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
}

#cube2 {
  z-index: 2;
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
}

#cube3 {
  z-index: 1;
  -webkit-animation-delay: 1.4s;
  -moz-animation-delay: 1.4s;
}


/*** Cube's face Style ***/

.cube div {
  background-color: #000;
  background-size: 450px 300px;
  position: absolute;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}

.cube div.fb {
  width: 150px;
  height: 300px;
}

.cube div.tb {
  width: 150px;
  height: 300px;
}

.cube div.lr {
  width: 300px;
  height: 300px;
}


/* Face image and position */

.facefront {
  background-image: url(https://picsum.photos/600/400?image=1080);
  -webkit-transform: translateZ(150px);
  -moz-transform: translateY(0px);
}

.faceback {
  background-image: url(https://picsum.photos/600/400?image=977);
  -webkit-transform: rotateY(180deg) rotateZ(180deg) translateZ(150px);
  -moz-transform: translateY(300px);
}

.facetop {
  background-image: url(https://picsum.photos/600/400?image=861);
  -webkit-transform: rotateX(90deg) translateZ(150px);
  -moz-transform: translateY(600px);
}

.facebottom {
  background-image: url(https://picsum.photos/600/400?image=696);
  -webkit-transform: rotateX(-90deg) translateZ(150px);
  -moz-transform: translateY(900px);
}

.faceleft {
  background-color: #000;
  -webkit-transform: rotateY(90deg) translateZ(0px);
  -moz-transform: scaleX(0);
}

.faceright {
  background-color: #000;
  -webkit-transform: rotateY(-90deg) translateZ(150px);
  -moz-transform: scaleX(0);
}

#cube1 div {
  background-position: 0 0;
}

#cube2 div {
  background-position: -150px 0;
}

#cube3 div {
  background-position: -300px 0;
}

<section id="wrapper">

  <div id="viewStage">
    <div id="cube1" class="cube">
      <div class="facefront fb"></div>
      <div class="faceback fb"></div>
      <div class="faceleft lr"></div>
      <div class="faceright lr"></div>
      <div class="facetop tb"></div>
      <div class="facebottom tb"></div>
    </div>
    <div id="cube2" class="cube">
      <div class="facefront fb"></div>
      <div class="faceback fb"></div>
      <div class="faceleft lr"></div>
      <div class="faceright lr"></div>
      <div class="facetop tb"></div>
      <div class="facebottom tb"></div>
    </div>
    <div id="cube3" class="cube">
      <div class="facefront fb"></div>
      <div class="faceback fb"></div>
      <div class="faceleft lr"></div>
      <div class="faceright lr"></div>
      <div class="facetop tb"></div>
      <div class="facebottom tb"></div>
    </div>
  </div>

</section>

Эффект отлично отображается в Chrome, но не очень хорошо в Firefox.

Я немного поработал с CSS, но не могу заставить его работать.

Похоже, что Firefox (начиная с версии 58) теперь поддерживает CSS3 3D-преобразования (https://caniuse.com/#search=CSS3%203D).

Итак, мой вопрос: если Firefox теперь поддерживает 3D-преобразования CSS3, почему эта анимация не отображается правильно в Firefox?