CSS-翻转后背面可见的元素

我正在制作CSS翻转卡，遇到了这个问题，尽管

背面可见性：隐藏从另一侧仍然可见的元素

如果运行（此处简化）代码段并单击右下角的
more
，则卡会翻转，但
more
仍可见。这可能是因为
位置：absolute
，因为另一个元素的行为符合预期

所以我的问题是，有没有可能解决这个问题（最好只使用CSS），并且背景仍然是半透明的


document.querySelector（'.card'）。addEventListener（'click'，函数（e）{
如果（e.target.nodeName！='I'）返回；
e、 target.parentNode.parentNode.classList.toggle（'flip'）；
});
html，正文{
身高：100%；
背景：线性梯度（90度，#9EFFBE 0，#F4FFC7 45%，#F4FFC7 55%，#ADFCFF 100%）；
}
.标志{
背景：黄色；
边框：8px实心#fff；
边界半径：50%；
显示：块；
高度：120px；
保证金：1em自动；
宽度：120px；
}
.项目{
边框：1px实心透明；
显示器：flex；
高度：170px；
保证金：0.75em；
透视图：800px；
位置：相对位置；
宽度：40%；
}
.卡片{
宽度：100%；
身高：100%；
位置：绝对位置；
变换样式：保留-3d；
转变：转变1s；
}
.卡片数字{
保证金：0；
显示：块；
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
}
.卡一{
光标：指针；
显示：内联块；
位置：绝对位置；
右：.5em；
底部：.5em；
}
.card.flip{
变换：旋转（180度）；
}
.卡片--正面{
背景：rgba（255,255,255,0.33）；
边框：1px实心#fff；
位置：相对位置；
}
.卡片--背面{
背景：#D9FAEF；
背景：rgba（255,255,255,0.33）；
文本对齐：居中；
位置：相对位置；
变换：旋转（180度）；
}

更多
关闭
编辑

.card.flip .card--front {
    transition-delay: 0.3s;
    visibility: hidden;
}

背景实际上是一个渐变（这里我只放了一个简化的片段），所以这不起作用。按原意稍加调整：）谢谢！