我在新的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。它会跳跃并产生一些随机效果。任何想法如何解决这个问题?