Question

我创建了基于CSS过渡和转换的翻转卡片，但是当卡片翻转时，它在各种浏览器中都有一些渲染故障。

在Firefox中，无论指定的z-index如何，动画的顶部卡都会与底牌重叠在Chrome中，动画时卡片会闪烁。

指定了

backface-visibility:hidden和transform-style:preserve-3d，其他一切似乎都没问题。

也许还有其他一些CSS / JS黑客攻击？

由于

Answer 1

我相信你必须沿z方向移动后卡1px以保持在前卡上方。（translateZ（1像素））

或多或少与您尝试使用z-index相同，但在3D空间中。

我尝试在实例中执行此操作，但是有太多代码可以轻松找到它。您应该提供简化的示例来帮助人们帮助您

好的，终于明白了。它不是基础div，而是数字：

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