使用CSS transform + jquery进行奇怪的闪烁

Question

我（在this tutorial的帮助下）为我正在制作的网络项目制作了一张翻转卡片。当我刚刚使用图像时（在测试中）一切都很顺利，但是因为我用div替换了图像并填充了内容，所以当“后退”卡显示时，我得到了一些奇怪的闪烁：

您可以在此处试用：JSFiddle

正如您所看到的，前卡在转换时可通过后卡看到。

这个问题有解决方法吗？我不能回到图像，因为内容必须通过CMS进行更改。

Answer 1

我在`.front'中添加了一个更高的z-index并且它有效。

.front {
    z-index: 2;
}

SEE IT HERE

Answer 2

我认为你正在使用Chrome（也许是Safari），这个CSS应该解决它：

.eventimage {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

至少是图像......

Answer 3

在Z维度中翻译.back 1px：

#card .back {
    -webkit-transform: rotateY(180deg) translateZ(1px);
    -moz-transform: rotateY(180deg) translateZ(1px);
    -o-transform: rotateY(180deg) translateZ(1px);
    transform: rotateY(180deg) translateZ(1px);
}