Firefox 3D变换中的口吃/闪烁

Question

我今天遇到THIS SITE，二维码的3dtransform在FF中无法忍受。

我在Chrome 中查看了同一个站点，并且动画更加流畅。我想知道发生了什么，所以我查看了源代码并删除了不相关的信息并创建了一个小提琴：

DEMO

我从那个网站提取的核心代码在这里：

HTML

<div class="QRcode3d">
    <img alt="QR Code Cube 1" src="http://blog.qr4.nl/images/QR-Cube-1.jpg">
</div>

CSS

.QRcode3d {
    height: 331px;
    margin: 150px auto;
    position: relative;
    transform: scale(0.9);
    transform-style: preserve-3d;
    width: 331px;
    animation: 30s linear 0s normal none infinite spin1;
    display: block;
}

@-webkit-keyframes spin1 {
    0% {-webkit-transform: perspective(600px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);}
    100% {-webkit-transform: perspective(600px) rotateX(360deg) rotateY(450deg) rotateZ(0deg);}
}

@keyframes spin1 {
    0% {transform: perspective(600px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);}
    100% {transform: perspective(600px) rotateX(360deg) rotateY(450deg) rotateZ(0deg);}

}

我在该主题上看到的唯一BUG REPORT 没有太多关于“解决”问题的信息。复制它甚至有困难。

转到CanIUse 表明它在我的FF 版本上可用，甚至在FF 浏览器中切换hardware acceleration 并没有真正改变这种情况。

有谁知道 FF 中 3D 变换问题的根本原因，以及可以采取什么措施来补救这种情况？

Answer 1

只要把视角从动画中拿出来，放到主规则中：

.QRcode3d {
    height: 331px;
    margin: 150px auto;
    position: relative;
    transform: scale(0.9);
    transform-style: preserve-3d;
    width: 331px;
    animation: 30s linear 0s normal none infinite spin1;
    display: block;
    perspective: 600px;
}

这里是演示：http://jsfiddle.net/PLZ2j/1/

更新了DEMO（适用于 Chrome）