Question

我今天遇到了THIS SITE，3dtransform中的FF QR码无法忍受。

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

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

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版本上可用，即使在hardware acceleration浏览器中切换FF也没有真正改变这种情况。

有没有人知道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）

在Firefox的3d变换中断断续续/闪烁

1 个答案: