css - Firefox 和 Chrome 3D 转换故障

Question

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

活生生的例子

在 Firefox 中，动画的顶部卡片与下方卡片重叠，无论是否指定z-index.
在 Chrome 中，卡片在动画时会闪烁。

backface-visibility:hidden和transform-style:preserve-3d被指定，其他一切似乎都很好。

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

谢谢

Answer 1

我相信你必须将后卡在 z 方向移动 1px 才能停留在前卡上方。(translateZ(1px);)

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

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

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

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