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

时间:2014-10-29 08:35:42

标签: css firefox

我正在尝试为下拉菜单创建一个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转换的特殊代码吗? 什么是混乱?

2 个答案:

答案 0 :(得分:0)

检查这个小提琴,看看它是否适合你。 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中我似乎不需要包含它们。

答案 1 :(得分:0)

Linux和旧版Windows计算机(没有WebGL支持的计算机)的某些配置在使用3D转换时遇到问题,并将它们视为透视设置为none

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