css - Firefox 和 Chrome 3D 转换问题

Question

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

Live example

在 Firefox 中，无论指定的 z-index 是什么，上面的动画卡片都会与下面的卡片重叠。
在 Chrome 中，卡片在动画时会闪烁。

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

也许还有其他一些 CSS/JS hack？

谢谢

Answer 1

我认为您必须在 z 方向将后卡移动 1px 才能保持在前卡上方。 (平移Z(1px);)

与您尝试使用 z-index 所做的大致相同，但在 3D 空间中。

我尝试在实际示例中执行此操作，但代码太多，无法轻松找到它。你应该给出简化的例子来帮助人们帮助你

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

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