CSS翻转动画在Mozilla中不起作用

Question

我的css翻转动画在chrome中可以正常工作，但在mozilla firefox中却不能工作。我想知道为什么即使我提供了moz- prefix。即使在Microsoft Edge中它也可以正常工作。请您能帮我吗？我无法解决问题。我已经编辑了问题，并添加了html部分。请看看。

styles.css

   .flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;

  /* border: 1px solid #ccc; */
}

  .flip-container:hover .flipper,  
 .flip-container.hover .flipper {
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
      transform: rotateY(180deg);
  }

.flip-container, .front, .back {
  width: 220px;
  height: 180px;
  text-align: center;
  margin:auto;
}

.flipper {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;

  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;

-o-transition: 0.6s;
  -o-transform-style: preserve-3d;

  transition: 0.6s;
  transform-style: preserve-3d;

  position: relative;
}

.front, .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
  backface-visibility: hidden;

  position: absolute;
  top: 0;
  left: 0;
}

 .front {
  /*background: url(/web/images/movies.jpeg) 0 0 no-repeat;*/
  z-index: 2;
}
 #background1{
  background: url(/web/images/movies.jpeg) 0 0 no-repeat;
  z-index: 2;
 }

.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
 -o-transform: rotateY(180deg);
   transform: rotateY(180deg);
  /* background: #f8f8f8; */
  /* background: url(/web/images/paytm.png) 0 0 no-repeat; */
  }

html。 .. ..

   <div style="text-align:center" class="flip-container" ontouchstart="this.classList.toggle('hover');">
                <div class="flipper" style="text-align:center">
                    <div class="front">
                        <img src="/web/images/gk.jpg"  alt="" /> 
                        <h2 id="play" style="text-align-last: center">GENERAL KNOWLEDGE</h2>
                    </div>
                    <div class="back">
                    <a href="/pksGK">
                    <img src="/web/images/pks.png"  alt="" /> 
                    <h2 id="play" style="text-align-last: center">blah</h2>
                    </a>
                    </div>
                </div>
            </div>