CSS 卡片翻转和文本

Question

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

不同浏览器的问题：

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

后面

#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 冲突的情况。当 2 个元素（完全）共享同一平面时会发生这种情况，因此渲染引擎不知道哪个元素在另一个元素的前面。结果可能是闪烁的图像，也可能是混合图像（一幅图像的一部分和另一幅图像的一部分）

在 2d 中解决此问题的常用方法 zindex 无法解决此问题。你需要在 3D 中解决它 space.

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

将图像在 z 方向上移动 1 px：

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

将 div 向后移动 1px：

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

fiddle

CSS 卡片翻转和文本

CSS Card Flip and Text

html

css

text

css-animations