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

我在點擊時激活了這個可愛的旋轉和翻轉按鈕。它在谷歌瀏覽器（以及微軟Edge）中運行良好，但是當我嘗試在Firefox中啓動它時，點擊使按鈕移動一點點，然後返回。我不懂爲什麼。CSS3中的翻轉和旋轉功能在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從同一文件的工作..

來源

2016-05-06 Algernop K.

它工作正常，我在Firefox也[小提琴鏈接]（https://jsfiddle.net/2zumoLqa/） – Sharon

它工作正常，我也在Firefox https://jsfiddle.net/2zumoLqa/ –

@John Smith請再次測試，或者如果您仍面臨同樣的錯誤，請讓我們知道您的Firefox的版本.. –

它的作品了。無論如何定義動畫的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>

來源

2016-05-06 12:15:35

添加

-moz-animation:

-moz-transform:

無處不在，因爲舊的Firefox使用-moz-

來源

2016-05-06 12:15:52 TubbyStubby

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

回答

相關問題