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

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

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

【问题讨论】:

    标签: css twitter-bootstrap-3 transform


    【解决方案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; }

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

        (旁注,我去年访问了华沙并喜欢它!)

        【讨论】:

          猜你喜欢
          • 2013-05-19
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2015-04-03
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多