摆脱 css 3d 变换上的闪烁

【问题标题】：Get rid of blinking on css 3d transform摆脱 css 3d 变换上的闪烁
【发布时间】：2014-04-29 11:03:07
【问题描述】：

这是一个例子： http://codepen.io/piernik/pen/cKzxq

在 chrome 上，按下翻转按钮时我有难看的闪烁。我怎样才能摆脱它？

【问题讨论】：

【解决方案1】：

.card article 应该是这样的

   .card article {
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000; /* this line is added */
    }

最后一行代码的添加位置。

演示：http://codepen.io/anon/pen/HpFDz

【讨论】：

【解决方案2】：

使用

-webkit-perspective: 1000;

FIXED DEMO

【讨论】：

【解决方案3】：

.card .front { z-index: 2; } .card .back { z-index: 1; }

将以上内容添加到您的代码中，应该会很好。翻转对于应该显示哪些层感到困惑，这会产生频闪效果。

（旁注，我去年访问了华沙并喜欢它！）

【讨论】：