问
使用背面可视性"翻转"盒子时闪烁的背面可见性
wqp2012 发布于 2023-02-12 18:43我正在使用一个相当简单的CSS过渡来创建一个盒子,通过同时转换两个div 180deg来"翻转".当你在盒子的"背面"时,它应该是略微透明的,这样你就可以看到底面.
除了最新的Safari 7和iOS 7之外,我在所有浏览器中都能很轻松地工作.在Safari 7上,动画闪烁,后卡在动画结束时"弹出"到前面.
这似乎是在较新的Safari上渲染动画的一个错误.是否有一种解决方法可以使其表现更好？
在Chrome和Safari上查看动画的GIF
请参阅http://cssdeck.com/labs/flippable-card上的演示
1 个回答
-
无法在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中测试,所以我可以肯定这是一个解决方案.
2023-02-12 18:46 回答
DD906114329
撰写答案
今天，你开发时遇到什么问题呢？
立即提问
京公网安备 11010802041100号