：前：在Firefox之后，以便

Question

CSS 3D不是渲染我使用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) 

歌剧，Safari和Chrome都工作得很好，但Firefox总是显示硬币：当硬币不旋转之前在上面的图像。当它旋转时一切正常，但可能在动画停止1秒后，似乎div重新渲染，并且对于任何旋转的硬币而不是看到之前的图像，则会显示另一个图像的背面。

我将不胜感激任何帮助或建议。

Answer 1

回答我自己的问题，而不是删除它，因为任何人都有类似的问题。

我需要添加一个角度单位，例如像这样：

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

它在Firefox正常工作为好。

更新提琴在这里：http://jsfiddle.net/6gdrQ/3/