html - 翻转卡片，背面卡片上的图像在第一次翻转时出现缓慢

Question

我在玩 CSS 3D 动画时遇到了一个奇怪的问题。

我在做什么

创建了一张卡片，它有两个面，正面和背面，两个图像。

问题

卡片第一次翻转以显示背面卡片时并不顺利，您看到第一张卡片旋转，然后一瞬间什么都看不到，然后背面卡片突然出现。

奇怪

只有第一个翻转是错误的，所有其他翻转之后看起来都很平滑，这正是我要找的。

我认为问题可能是什么

第一次翻转发生时，背面图像尚未加载。我尝试使用 JS 预加载图像但它什么也没做。

JSFIDDLE

http://jsfiddle.net/mz49d/

这很烦人，无论如何我都想听听我能解决这个问题。我什至在 CSS 中加入了每个供应商前缀，但它没有任何改变。

编辑

我刚刚在 FF30 中测试过它，它似乎可以工作。它在我的 Chrome 36.0.1985.125 中不起作用。

Answer 1

看起来像putting the images as css-background-images适用于 Chrome 和 FF。

但不确定在元素的其他部分使用此方法是否有任何缺点...

HTML

<div id="card">
    <div class="card-side front-card"></div>
    <div class="card-side back-card"></div> 
</div>

CSS

.front-card {
    background: url(http://images.wisegeek.com/planet-earth.jpg);
}
.back-card {
    background: url(http://haughtonmarsproject.com/wp-content/uploads/2013/11/Mars-1-Project.jpg);
}