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/

它对我来说很好。但你唯一需要改变的是为动画添加一个时间，可以通过添加“animation-duration：”或将'animation-name'改为'animation'并在末尾添加时间如下所示

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

为了安全起见我通常包括所有前缀（moz for 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。

为什么CSS3透视变换在firefox中不起作用

2 个答案: