CSS3 旋转翻转卡片 - 闪烁？

Question

CSS3 旋转翻转卡片 - 闪烁？

6

请看这个页面上的灰色框：http://goo.gl/fL973 当你悬停在上面时，它应该翻转并显示另一面。在Chrome浏览器中它可以正常工作，但出现了很多闪烁的问题。我尝试了调整规则甚至在盒子周围添加容器，但都没有成功。

我阅读了此问题以及其他问题：为什么在Chrome浏览器中使用rotateY (flip) css3动画会出现闪烁？问题似乎是带有backface-visibility: hidden; 的元素不能具有背景。因此，作为解决方法，我认为我可以在.front和.back内部放置一个元素，并给该元素设置背景。但这仍然无法解决闪烁问题。

除此之外，我也不确定为什么它只在Chrome/webkit中有效。我确实为所有内容添加了必要的前缀，所以它应该可以正常工作，难道不是吗？

您有什么建议吗？

- qwerty

原始示例已不再可用。 - 2C-B

1

@2C-B 哦，是的，网站已经上线了。这是链接：http://goo.gl/twrXGI - qwerty

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- qwerty · Accepted Answer

将 backface-visibility: hidden; 从 .card 移到 .front 和 .back 后，一切正常。闪烁消失了。现在我只需要为不支持的浏览器提供一些备选方案。