CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – 使用背景可见性“翻转”一个框时,闪烁的背面可见性大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用一个相当简单的CSS转换,通过同时转换两个div 180deg创建一个“翻转”的框.当你在盒子的“后面”时,它应该是稍微透明的,所以你可以看到底面.

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

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

查看ChromeSafari动画的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中测试,@R_658_9447@确定这是一个解决方案.

大佬总结

以上是大佬教程为你收集整理的css – 使用背景可见性“翻转”一个框时,闪烁的背面可见性全部内容,希望文章能够帮你解决css – 使用背景可见性“翻转”一个框时,闪烁的背面可见性所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。