我正在使用一个相当简单的CSS转换,通过同时转换两个div 180deg创建一个“翻转”的框.当你在盒子的“后面”时,它应该是稍微透明的,所以你可以看到底面.
在所有浏览器中,除了最新的Safari 7和iOS 7之外,我都可以很轻松地工作.在Safari 7中,动画片闪烁,后卡在动画结尾处“弹出”到前面.
解决方法
不能在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中测试,所以我可以确定这是一个解决方案.
