我的 Javascript 翻书代码在 Chrome 上运行良好，但在 Firefox 上有问题我怎样才能实现解决方案？

如何解决我的 Javascript 翻书代码在 Chrome 上运行良好，但在 Firefox 上有问题我怎样才能实现解决方案？

我使用 HTML、CSS3 和 JavaScript 创建了一个动画书。它在 Google Chrome 上运行良好，但在 Firefox 上运行不正常。我已经谷歌搜索并试图找到答案。在大多数情况下，据说 Firefox 处理提升的方式与 Chrome 不同。但没有解决办法。输出在下面的链接中。如果使用 Chrome 打开，它可以正常工作，但如果使用 Firefox 打开，则会产生问题。

我的代码是：

var front = document.querySelector('.face-front');
var back = document.querySelector('.face-back');
var flip = document.querySelector('.book-content');
var uno = document.querySelectorAll('.book');
var portada = document.querySelectorAll('#portada');

var contZindex = 2;
var customZindex = 1;

// javascript hoisting function starts

// javascript hoisting function ends


for(var i = 0; i < uno.length; i++){
  uno[i].style.zIndex = customZindex;
  customZindex--;

  uno[i].addEventListener('click',function(e){
    var tgt = event.target;
    var unoThis = this;

    unoThis.style.zIndex = contZindex;
    contZindex++;

    if(tgt.getAttribute('class') == 'face-front'){
      unoThis.style.zIndex = contZindex;
      contZindex += 20;
      setTimeout(function(){
        unoThis.style.transform = 'rotateY(-180deg)';
      },500);
      // setTimeout(buntyTimeoutFront(),500);

    }

    if(tgt.getAttribute('class') == 'face-back'){
      unoThis.style.zIndex = contZindex;
      contZindex += 20;
      setTimeout(function(){
        unoThis.style.transform = 'rotateY(-0deg)';
      },500);
      // setTimeout(buntyTimeoutBack(),500);
    }

    if(tgt.getAttribute('id') == 'portada'){
      flip.classList.remove("trnsf-reset");
      flip.classList.add("trnsf");
    }

    if(tgt.getAttribute('id') == 'trsf'){
      flip.classList.remove("trnsf");
      flip.classList.add("trnsf-reset");
    }
  });
}

*{
  pddding: 0;
  margin: 0;
  font-family: sans-serif;
}


p{
  margin-top: 0;
  font-size: 14px;
  text-align: justify;
}


/* classes for javascript starts*/



.trnsf{
  /* transform for diff browser starts */
  -webkit-transform: translateX(80px);
  -moz-transform: translateX(80px);
  -ms-transform: translateX(80px);
  -o-transform: translateX(80px);
  transform: translateX(80px);
  /* transform for diff browser ends */
}

.trnsf-reset{
  /* transform for diff browser starts */
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
  /* transform for diff browser ends */
}


/* classes for javascript ends*/


.container,.book-content{
  /* display flex starts*/
  display: flex;
  display: -webkit-Box;
  display: -moz-Box;
  display: -ms-flexBox;
  display: -webkit-flex;
  /* display flex ends*/
  /* justify-content starts */
  justify-content: center;
  -webkit-Box-pack: center;
  -webkit-justify-content: center;
  -moz-Box-pack: center;
  -ms-flex-pack: center;
  /* justify-content ends */
  /* align items center */
  align-items: center;
  -webkit-Box-align: center;
  -moz-Box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  /* align items center */
}

.container{
  width: 100%;
  height: 100vh;
  background: #2d6f75;
}


.book-content{
  width: 65%;
  min-width: 250px;
  max-width: 400px;
  height: 330px;
  position: relative;
  /* perspective for css starts */
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
  /* perspective for css ends */
  transition: 1s;
}


.book{
  position: absolute;
  width: 65%;
  height: 100%;
  transition: 1s;
  /* transform-style starts  */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  /* transform-style ends  */
  /* transform-oregin starts  */
  transform-origin: left;
  -webkit-transform-origin: left;
  -moz-transform-origin: left;
  -ms-transform-origin: left;
  -o-transform-origin: left;
  /* transform-oregin ends  */
}


.face-front,.face-back{
  width: 100%;
  height: 100%;
  padding: 15px;
  background: white;
  Box-sizing: border-Box;
  overflow: hidden;
}


.face-front{
  Box-shadow: inset 3px 0px 20px -7px black;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}


.face-back{
  position: absolute;
  top: 0;
  left: 0;
  /* transform for diff browser starts */
  transform: translateZ(-1px) rotateY(180deg);
  -webkit-transform: translateZ(-1px) rotateY(180deg);
  -moz-transform: translateZ(-1px) rotateY(180deg);
  -ms-transform: translateZ(-1px) rotateY(180deg);
  -o-transform: translateZ(-1px) rotateY(180deg);
  /* transform for diff browser ends */
  Box-shadow: inset -3px 1px 20px -7px black;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}


#portada{
  background: url('../images/front.jpg');
}

#portada-back{
  background: url('../images/back.jpg');
}

#portada,#portada-back{
  background-size: 100% 100%;
}




/* responsive part starts here */

@media screen and (max-width: 800px){
  p{
    font-size: 12px;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  <Meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/style.css">


  <title>Document</title>
</head>
<body>

    <div class="container" id = "container">
        <div class="book-content">
          <!-- book container -->
          <div class="book">
            <div class="face-front" id = "portada"></div>
            <div class="face-back" id = "trsf">
              <h1>Title 1</h1>
              <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Dicta cupiditate,at aut harum necessitatibus doloremque inventore dolores dolorem facilis quas consectetur,incidunt voluptatibus blanditiis assumenda ratione,culpa iusto exercitationem vel.</p>
            </div>
          </div>
          <!-- book container -->
          <!-- book container -->
          <div class="book">
            <div class="face-front">
              <h1>Title 2</h1>
              <p>Lorem ipsum dolor sit amet,culpa iusto exercitationem vel.</p>
            </div>
            <div class="face-back">
              <h1>Title 3</h1>
              <p>Lorem ipsum dolor sit amet,culpa iusto exercitationem vel.</p>
            </div>
          </div>
          <!-- book container -->
          <!-- book container -->
          <div class="book">
            <div class="face-front">
              <h1>Title 4</h1>
              <p>Lorem ipsum dolor sit amet,culpa iusto exercitationem vel.</p>
            </div>
            <div class="face-back">
              <h1>Title 5</h1>
              <p>Lorem ipsum dolor sit amet,culpa iusto exercitationem vel.</p>
            </div>
          </div>
          <!-- book container -->

          <!-- book container -->
          <div class="book">
            <div class="face-front">
              <h1>Title 6</h1>
              <p>Lorem ipsum dolor sit amet,culpa iusto exercitationem vel.</p>
            </div>
            <div class="face-back" id = "portada-back"></div>
          </div>
          <!-- book container -->
        </div>
    </div>

  <script src = "js/script.js"></script>
</body>
</html>

输出在下面的链接中。 https://studyoob.com/myCustomFlipbook/

你的帮助会让我完成项目。