爲什麼CSS3透視變換不會在Firefox

Question

我試圖創建一個CSS變換下拉菜單中，但它不工作在Firefox的工作，這是CSS代碼：

@-webkit-keyframes flipInX { 
    0% { 
    -webkit-transform: perspective(400px) rotateX(90deg); 
    transform: perspective(400px) rotateX(90deg); 
    opacity: 0; 
    } 

    100% { 
    -webkit-transform: perspective(400px) rotateX(0deg); 
    transform: perspective(400px) rotateX(0deg); 
    opacity: 1; 
    } 
} 

@keyframes flipInX { 
    0% { 
    -webkit-transform: perspective(400px) rotateX(90deg); 
    -ms-transform: perspective(400px) rotateX(90deg); 
    transform: perspective(400px) rotateX(90deg); 
    opacity: 0; 
    } 

    100% { 
    -webkit-transform: perspective(400px) rotateX(0deg); 
    -ms-transform: perspective(400px) rotateX(0deg); 
    transform: perspective(400px) rotateX(0deg); 
    opacity: 1; 
    } 
} 

.flipInX { 
    -webkit-backface-visibility: visible !important; 
    -ms-backface-visibility: visible !important; 
    backface-visibility: visible !important; 
    -webkit-animation-name: flipInX; 
    animation-name: flipInX; 
} 

所以是有特殊代碼爲Firefox轉換？ 什麼是混亂？

Answer 1

檢查這個小提琴，看看它是否適合你。 http://jsfiddle.net/jybenjya/

它適用於我。但你需要改變的唯一的事情就是給動畫添加時間，或者通過添加「動畫時長：」或將「動畫名稱」更改爲「動畫」並在末尾添加時間如下

-webkit-animation: flipInX 3s; 
animation: flipInX 3s; 

只是爲了安全起見，我通常包括所有的前綴（MOZ爲Firefox）

-webkit-animation: flipInX 3s; 
    -moz-animation: flipInX 3s; 
     -o-animation: flipInX 3s; 
      animation: flipInX 3s; 

-webkit-transform: 
    -moz-transform: 
    -ms-transform: 
    -o-transform: 
     transform: 

等。但在我的jsfiddle我似乎並不需要包括它們。

Answer 2

某些配置的Linux和較舊的Windows計算機（不支持WebGL的計算機）在3D轉換時遇到問題，並將它們當作透視設置爲none。

Windows上的Firefox 錯誤地renders plugin content within no-op 3D transforms。