Firefox 32.0.2转换问题

时间:2014-09-23 12:50:40

标签: html css3 firefox animation

我在新的Firefox 32.0.2中发现了问题 http://jsfiddle.net/hdxoo9wy/1/ 这是一个例子。

HTML

<div class="box">
    <div class="ob3d"></div>
</div>

CSS

html,body{
     height: 100%;
}
.box{
    perspective: 1000px;
    width: 80%;
    height: 80%;
    margin: 10%;
    border: 1px rgba(0,255,0,0.2) dashed;
}
.ob3d{
    width: 100%;
    height: 100%;
    transform: rotateX(0.5deg);
    background: rgba(255,0,0,0.5);
    transform-origin: 50% 100% 0;
    outline: 1px transparent solid;
    animation: bounce 5s linear infinite;
}
@keyframes bounce{
  0%   { transform: rotateX(-20deg);}
  50% { transform: rotateX(20deg);}
  100% { transform: rotateX(-20deg);}
}

在rotationX期间出现问题,范围为-0.5deg,0.5deg。它会跳跃并产生一些随机效果。任何想法如何解决这个问题?

0 个答案:

没有答案