CSS3中的翻转和旋转功能在Firefox上不起作用

debugcn 发表于 Dev

阿尔格诺普（Algernop K.）

点击后，我激活了这个可爱的旋转和翻转按钮。它在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);
      }

    }

编辑：我没有正确调查问题。是onClickjQuery被某种方式破坏了，在我的网站的Firefox中无法使用。

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

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

来自同一文件的其他jQuery也可以工作。

基努·库里安（Jinu Kurian）

它也对我有用。无论如何定义动画的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);
  }
}