html - 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 中构造对象时，避免出现“深度冲突”的情况总是一个好主意。当两个元素共享(完全相同)同一平面时，就会发生这种情况，因此渲染引擎不知道哪个元素在另一个元素的前面。结果可能是闪烁的图像，也可能是混合图像(一张图像的一部分和另一张图像的一部分)

在 2d 中解决此问题的常用方法 zindex 无法解决此问题。您需要在 3D 空间中求解它。

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

将图像在 z 方向上移动 1 像素到前面:

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

将 div 向后移动 1px:

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

fiddle