点击后,我激活了这个可爱的旋转和翻转按钮。它在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也可以使用。

最佳答案

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

关于jquery - CSS3中的翻转和旋转功能在Firefox上不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37071897/

10-12 12:59
查看更多