Question

嘿，伙计们在Firefox中遇到问题。 3D动画很不稳定。

这是同一个

HTML

 <div id="container">
   <div id="ad"></div>
</div>

CSS

#ad{
height:250px;
width:300px;
position:absolute;
top:30%;
left:40%;
background:green;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
outline:1px solid transparent;

}

  #ad:hover{
   animation:rotate 1s;
      -webkit-animation:rotate 1s;
  }

#container{
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
perspective:350px;
-webkit-perspective:350px;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
position:relative;

}

@-moz-keyframes rotate{
  0%{
    transform:rotateY(0deg);
  }
100%{
    transform:rotateY(-10deg);
}
  }
 @-webkit-keyframes rotate{
  0%{
    -webkit-transform:rotateY(0deg);
  }
  100%{
    -webkit-transform:rotateY(-10deg);
  }
  }

在Chrome上，动画很流畅。通常，动画在chrome中并不顺畅。我将背面可见性添加为隐藏和转换样式为preserve-3d。仍然没有成功。如果我有任何错误，请告诉我。

对此有何解决方案？或者它的sys问题。

3d旋转摇摇欲坠的firefox

0 个答案: