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