翻转卡，背卡上的图像慢慢出现在第一次翻转

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);
}