CSS 3 个过渡 - Bootstrap 3.2 的闪烁内容

Question

我在尝试使用 bootstrap 3.2 和 css3 转换来模拟水平翻转效果时遇到奇怪的闪烁效果。发生翻转，但 "Card" 背面的内容在转换过程中快速闪烁。我已经包含了问题的 JSFiddle。这发生在 chrome。在IE中，转换后卡片的背面完全不显示。

我正在使用 backface-visibility: hidden 如代码片段所示

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

https://jsfiddle.net/w953nvpq/

提前感谢您对此提供的任何帮助。

Answer 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

CSS 3 个过渡 - Bootstrap 3.2 的闪烁内容

CSS 3 Transitions - Flickering Content with Bootstrap 3.2

html

css

twitter-bootstrap

transition