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中运行良好。

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

：在Firefox之前和之后：使用CSS 3D不按顺序渲染

1 个答案: