为什么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。