Question

我点击这个可爱的旋转和翻转按钮。它可以在Google Chrome（以及Microsoft Edge）中正常工作，但是只要我尝试在Firefox中启动它，点击就会使按钮移动一小部分，然后再返回。我不明白为什么。

这是我的CSS：

.spinner {
      width: 120px;
      height: 120px;
      background: url('down.png');
      margin-left:auto;
      margin-right:auto;
      -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
      animation: sk-rotateplane 1.2s infinite ease-in-out;
    }

    @-webkit-keyframes sk-rotateplane {
      0% { -webkit-transform: perspective(120px) }
      50% { -webkit-transform: perspective(120px) rotateY(180deg) }
      100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
    }

    @keyframes sk-rotateplane {
      0% { 
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
      } 50% { 
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
      } 100% { 
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      }

    }

编辑：我没有正确调查问题。它是onClick jQuery以某种方式被破坏，它在我的网站上的Firefox中不起作用..

<!-- HTML -->
<button id="reload" onclick="return returnGame();clearDescr();">
</button>

<!-- The .js file -->
$("#theSpinner").removeClass("spinner");
$("#theSpinner").addClass("notspinning");

来自同一文件的其他jQuery工作..

Answer 1

它也适合我。无论如何定义动画的FF版本并转换

  @-moz-keyframes sk-rotateplane { 

  }

和

 -moz-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);

.spinner {
  width: 120px;
  height: 120px;
  background: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150');
  margin-left: auto;
  margin-right: auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes sk-rotateplane {
  0% {
    -webkit-transform: perspective(120px)
  }
  50% {
    -webkit-transform: perspective(120px) rotateY(180deg)
  }
  100% {
    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
  }
}
@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

<div class="spinner">

</div>

Answer 2

添加

-moz-animation:

＆安培;

-moz-transform:

无处不在，因为较旧的Firefox使用-moz-

CSS3中的翻转和旋转功能无法在Firefox

2 个答案: