CSS卡翻转和文本

Question

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

浏览器中的不同问题：

Chrome：闪烁
Safari：隐藏在<div>

之后

Fiddle Here

#container {
    -webkit-perspective: 800;
}
.flip {
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 0.5s ease;
    background-color: red;
    height: 5em;
    width: 5em;
    padding: 1em;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    line-height: 6em;
    cursor: pointer;
}

.flip > img {
    z-index: 2;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    width: 5em;
}
.flip:hover{ -webkit-transform:rotateY(180deg); }
.flip > *{
    -webkit-backface-visibility: hidden;
    position:absolute;
}
.flip > div{
    -webkit-transform: rotateY(180deg);
    text-align:center;
    height: 5em;
    width: 5em;
}

Answer 1

在3D中构建对象时，避免出现称为z-fighting的情况总是一个好主意。当2个元素共享（确切地）同一平面时，会发生这种情况，因此渲染引擎不知道哪个元素位于另一个元素的前面。结果可能是闪烁的图像，也可能是混合图像（一个图像的一部分和另一个图像的一部分）

在2d中解决这个问题的常用方法是zindex，不会解决这个问题。你需要在3D空间中解决它。

在你的情况下，解决方案将是

将z中的图像1 px移到前面：

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

将div 1px移到后面：

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

fiddle