Css Firefox和Chrome 3D转换故障

我创建了基于CSS转换和变换的翻转卡片，但在各种浏览器中翻转卡片时，它会出现一些渲染问题

在Firefox中，无论指定的

z-index

，
在Chrome中，当设置动画时，卡会闪烁

backface visibility:hidden

和

transform style:preserve-3d

已指定，其他一切似乎都正常

也许还有其他的CSS/JS黑客

---

谢谢

我认为您必须将背面卡沿z方向移动1px才能停留在正面卡上方。（translateZ（1px）；）

或多或少与您尝试使用z索引时所做的相同，但在3D空间中

我试图在这个实例中实现它，但是有太多的代码很难找到它。你应该举一些简单的例子来帮助别人

好了，终于明白了。这不是基本div，而是图：

.card-wrap figure {
    -webkit-transform: translateZ(1px);
}

---

谢谢，伙计，这真的很有帮助。即使使用

translateZ（0px）

。所以现在它在Firefox中工作得很好。在Chrome中，它仍在闪烁：（.很抱歉代码太乱了，我认为通过Firebug或其他调试器添加css不会有问题。最后我确实理解了你的代码。添加了更具体的答案。我添加了

translateZ（1px）

到

标记，现在它在Chrome中不再是blibking！对于Firefox，它应该被添加到

div.card

标记中。因此相同的解决方案对两种浏览器都有帮助！谢谢，谢谢，谢谢！！！；）很高兴它帮助了你