css - :before and :after on Firefox with CSS 3D not rendering in order

Question

我正在使用 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 总是在硬币不旋转时在顶部显示硬币:之前的图像。当它旋转时一切正常，但可能在动画停止后 1 秒，似乎 div 重新呈现并且对于任何旋转的硬币而不是看到之前的图像，而是显示另一个图像的背面。

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

Answer 1

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

我需要添加一个透视单元，例如:

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

而且它在 Firefox 中也能正常工作。

此处更新 fiddle :http://jsfiddle.net/6gdrQ/3/