为什么CSS3透视图转换在火狐中不起作用

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)

  -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机器(那些不支持透视的机器)在3D转换时会遇到问题，并且会把它们当作none来处理。

Windows 上的火狐 renders plugin content within no-op 3D transforms不正确。