当我尝试使用 bootstrap 3.2 和 css3 转换来模拟水平翻转效果时,我遇到了一种奇怪的闪烁效果。发生翻转,但“卡片”背面的内容在转换过程中快速闪烁。我已经包含了问题的 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/
提前感谢您对此提供的任何帮助。
最佳答案
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;
}
关于html - CSS 3 Transitions - 使用 Bootstrap 3.2 的闪烁内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30038913/