css – 使用背景可见性“翻转”一个框时,闪烁的背面可见性

我正在使用一个相当简单的CSS转换,通过同时转换两个div 180deg创建一个“翻转”的框.当你在盒子的“后面”时,它应该是稍微透明的,所以你可以看到底面.

在所有浏览器中,除了最新的Safari 7和iOS 7之外,我都可以很轻松地工作.在Safari 7中,动画片闪烁,后卡在动画结尾处“弹出”到前面.

这似乎是在较新的Safari上呈现动画的错误.有没有解决办法让这个行为更好？

查看Chrome和Safari动画的gifs

见这里演示http://cssdeck.com/labs/flippable-card

解决方法

不能在Safari上测试,但Chrome之前发生了类似的错误.

在这种情况下的解决办法是将z的背面移动1px

.card__back { 
    transform: rotateY(180deg) translateZ(1px); 
    backface-visibility: hidden; 
} 

.card--flipped .card__back {
    transform: rotateY(0deg) translateZ(1px); 
}

这在Chrome中发生,因为在动画时,空间顺序被计算(我的意思是,3d空间中的元素的位置),并且它覆盖了其他因素.

动画结束后,不再使用该计算系统.

正如我之前所说不能在Safari中测试,所以我可以确定这是一个解决方案.

原文地址：https://www.jb51.cc/css/214507.html