【问题标题】:CSS 3 Transitions - Flickering Content with Bootstrap 3.2CSS 3 过渡 - 使用 Bootstrap 3.2 闪烁内容
【发布时间】:2015-05-04 19:59:19
【问题描述】:

当我尝试使用 bootstrap 3.2 和 css3 过渡来模拟水平翻转效果时,我遇到了奇怪的闪烁效果。翻转发生,但“卡片”背面的内容在过渡期间快速闪烁。我已经包含了问题的 JSFiddle。这发生在 chrome 中。在 IE 中,转换后卡片的背面根本不显示。

我正在使用 backface-visibility: hidden 如此代码 sn-p 所见

.flippable > figure {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: all ease-in-out 0.5s;
}

https://jsfiddle.net/w953nvpq/

在此先感谢您提供任何帮助。

【问题讨论】:

    标签: html css twitter-bootstrap transition


    【解决方案1】:

    backface-visibility : hidden 不起作用,因为它需要 transform-style: preserve-3d 在元素本身,而不是在父元素中

    .flippable > figure {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        transition: all ease-in-out 0.5s;
        transform-style: preserve-3d;
    }
    

    现在这没用了:

    .flippable.flipped .front {
        visibility: hidden;
    }
    

    fiddle

    【讨论】:

    • 谢谢!我知道这一定很简单!
    猜你喜欢
    • 2018-05-14
    • 1970-01-01
    • 2017-07-03
    • 2015-08-05
    • 2021-02-14
    • 1970-01-01
    • 2014-08-29
    • 2021-10-25
    • 2016-07-02
    相关资源
    最近更新 更多