:before 和 :after 在 Firefox 上使用 CSS 3D 不按顺序呈现答案

【问题标题】：:before and :after on Firefox with CSS 3D not rendering in order:before 和 :after 在 Firefox 上使用 CSS 3D 不按顺序呈现
【发布时间】：2014-09-10 04:13:03
【问题描述】：

我正在使用 CSS 显示一些旋转的硬币，如下图所示：http://jsfiddle.net/6gdrQ/1/

部分相关代码如下：

.coin {
    background-image: url("http://coins.thefuntimesguide.com/images/blogs/presidential-dollar-coin-reverse-statue-of-liberty-public-domain.png");
    -moz-transform-style: preserve-3d;
    [...]
}

.coin:before {
    background-image: url("https://www.intnumis.com.au/images/product_gub257zcoy_201310GoldProofHoleyDollarDumpREV_medium.jpg");
-moz-transform: translateZ(-5px);
    [...]
}

我旋转：

-moz-transform: rotateY(1080deg)

Opera、Safari 和 Chrome 运行良好，但 Firefox 总是在硬币不旋转时在顶部显示 coin:before 图像。当它旋转时一切正常，但可能在动画停止后 1 秒，似乎 div 重新渲染，对于任何旋转的硬币，而不是看到之前的图像，显示另一个图像的背面。

如果有任何帮助或建议，我将不胜感激。

【问题讨论】：

标签： css firefox transform

【解决方案1】：

回答我自己的问题，而不是删除它以防万一有人遇到类似问题。

我需要添加一个透视单元，例如这样：

body {
    perspective: 800px;
    -webkit-perspective: 800px;
}

它在 Firefox 中也能正常工作。

在此处更新小提琴：http://jsfiddle.net/6gdrQ/3/

【讨论】：