Html CSS卡翻转和文本

我正在设计我的网站，我遇到了一个问题。我放了一个CSS卡翻转效果。它几乎可以完美地工作，但当它被翻转时。文本将闪烁，然后消失（在div后面）

浏览器中的不同问题：

铬：闪烁
Safari：隐藏在

---

在3D中构建对象时，最好避免出现所谓的z-战斗。当两个元素（完全）共享同一平面时，会发生这种情况，因此渲染引擎不知道哪个元素在另一个之前。结果可以是闪烁图像，也可以是混合图像（一个图像的一部分和另一个图像的一部分）

在2d中解决此问题的常用方法zindex无法解决此问题。你需要在三维空间中求解它

在你的情况下，解决办法是

将z轴上的图像1像素向前移动：

.flip>img {
    -webkit-transform: translateZ(1px) translateY(-50%);
}

将div 1px移到后面：

.flip>div{
    -webkit-transform: translateZ(-1px) rotateY(180deg);
}

---

jsidle，将标准CSS代码添加到

-webkit-

内容中。对我来说，文本似乎很好，但我重写了一个选择器和一条规则，以便在鼠标旋转时暂时离开红色圆圈时，

：hover

应用于容器，而不是红色圆圈。这是您正在寻找的还是文本仍然被错误地呈现？这是另一个版本，我将

#容器

也做成了一个圆圈，这样鼠标实际上只会触发圆圈区域。在Firefox 36.0.4中对我来说效果非常好。@Xufox文本在两个小提琴上都在闪烁（chrome 41.0.2272.101 m）@Xufox怪异，在Firefox中工作完美，文本在Safari中不显示，在chrome中闪烁。哇，真不敢相信我没有想到这一点。谢谢你的帮助

.flip>div{
    -webkit-transform: translateZ(-1px) rotateY(180deg);
}