Question

以下是示例： http://codepen.io/piernik/pen/cKzxq

在Chrome上，按下翻转按钮时，我感到很难眨眼。我怎么能摆脱它？

Answer 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

Answer 2

使用

-webkit-perspective: 1000;

FIXED DEMO

Answer 3

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

将以上内容添加到您的代码中，它应该是好的。关于应该显示哪些图层会产生混乱，这会产生频闪效果。

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

摆脱css 3d变换的眨眼

3 个答案: