Html 如何在3D变换中将包含文本的div隐藏在图像后面

大约一天半以来，我一直在尝试制作三张带有“flipcard”效果的图像，我认为我已经接近找到解决方案了

但是，正如您在代码笔上看到的，剩下的唯一问题是，当我的图像处于静态（即未悬停）时，您仍然可以看到它们上面的文本

如果有人能想出一种方法，当图像静止时，上面没有文本，但当它们悬停在上面时，就会产生“flipcard”效果——就像已经发生的那样，我真的很感激

基本上，我只希望在图像处于静态时隐藏/删除文本，但在动画发生后可见-就好像它们位于图像的“反面”！其余的都好

感谢大家提前回复，谢谢大家！：-）

代码笔链接-

HTML:

---

您可以通过添加

display:none

到

.back

类

然后在css中添加一些内容：

.photo-container:hover .back {
  display: block;
}

以下是更新的代码笔示例：

---

元素的

照片

和

背面

应该是兄弟元素（而不是父/子元素）

下面是一个片段（更改元素的宽度/高度以适应此情况）：

.flexcontainer{
显示器：flex；
透视图：700px；
}
.照片{
宽度：200px；
高度：150像素；
变换：旋转（0度）；
}
.照片img{
宽度：200px；
高度：150像素；
}
.照片容器{
变换样式：保留-3d；
过渡性质：变换；
过渡时间：2s；
位置：相对位置；
宽度：200px；
高度：150像素；
利润率：10px；
}
.照片容器：悬停{
变换：旋转（-180度）；
}
.回来{
变换：旋转（180度）；
颜色：红色；
}
.照片，
.回来{
背面可见性：隐藏；
位置：绝对位置；
左：0；
排名：0；
}
.回来{
变换：旋转（180度）；
}

圣诞树
生日快乐
万圣节前夕

嗯，我很享受这次挑战。我将继续为您添加另一个解决方案

.flexcontainer{
显示器：flex；
透视图：700px；
}
.photo desc{
位置：绝对位置；
}
.photo容器{
位置：相对位置；
z指数：100；
右边距：10px；
过渡性质：变换；
过渡时间：2s；
过渡样式：preserve-3d；
}
.照片容器：悬停{
变换：旋转（-180度）；
背面可见性：可见；
}
.回来{
位置：绝对位置；
排名前10名；
利润上限：-200px；
变换：旋转（180度）；
颜色：红色；
不透明度：0；
}
.photo容器：悬停>.back{
不透明度：1；
过渡：不透明度1s线性；
}

圣诞树
生日快乐
万圣节前夕

.flexcontainer {
    display: flex;
    perspective: 700px;
}

.photo {
    position: relative;
    z-index: 1000;
}

.photo-desc {
    position: relative;
    z-index: 100;
}

.photo-container {
    position: relative;
    margin-right: 10px;
    transition-property: transform;
    transition-duration: 2s;
    transition-style: preserve-3d;
    backface-visibility: hidden;
}

    .photo-container:hover {
        transform: rotateY(-180deg);
    }

.back {
    backface-visibility: visible;
    position: absolute;
    top: 10;
    margin-top: -200px;
    transform: rotateY(-180deg);
    color: red;
}

.photo-container:hover .back {
  display: block;
}