：前：在Firefox之後，以便

CSS 3D不是渲染我使用CSS來顯示一些紡紗硬幣如本琴：http://jsfiddle.net/6gdrQ/1/：前：在Firefox之後，以便

一些相關的代碼是如下：

.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重新渲染，並且對於任何旋轉的硬幣而不是看到之前的圖像，則會顯示另一個圖像的背面。

我將不勝感激任何幫助或建議。

來源

2014-07-18 kallikak

回答我自己的問題，而不是刪除它，因爲任何人都有類似的問題。

我需要添加一個角度單位，例如像這樣：

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

它在Firefox正常工作爲好。

更新提琴在這裏：http://jsfiddle.net/6gdrQ/3/

來源

2014-07-18 23:06:25 kallikak

：前：在Firefox之後，以便

回答

相關問題