Question

我正在制作this website，而且我在浏览器之间遇到了一个大问题。我在网站上添加了一些动画，当我触发动画时，我遇到了元素移动的问题。我通过添加backface-visibility:hidden;所有必需的浏览器前缀来解决它。在Chrome上一切正常，但在Firefox上没有用。这是我在搜索和询问后添加的内容

 /*perspective*/
-webkit-perspective:0;
   -moz-perspective:0;
    -ms-perspective:0;
     -o-perspective:0;
        perspective:0;
/*backface-visibility*/
-webkit-backface-visibility:hidden;
   -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
     -o-backface-visibility:hidden;
        backface-visibility:hidden;
/*transform*/
-webkit-transform:translate3d(0,0,0);
   -moz-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
     -o-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0);

Answer 1

根据此thread及此ticket中的说明，这是一个已知问题。

以下是唯一对我有用的解决方法：

添加＆＃39;转换：rotateX（0deg）＆＃39;到.front，.back规则修复程序此

Answer 2

使用CSS3在3D动画上创建此演示，向下滚动到背面可见性部分，并通过工作演示进行了解释。 http://www.tutorialspark.com/css3/CSS3_3D_Transforms.php

背面可见性在Firefox上不起作用

2 个答案: