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

Question

我正在制作一张CSS翻转卡并遇到了这个问题，尽管backface-visibility: hidden;仍然可以从另一侧看到一个元素。

如果您运行（此处简化）代码段并点击右下角的 more - 卡会翻转，但 {{ 1}} 保持可见。这可能是因为more，因为另一个元素的行为符合预期。

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

position: absolute

document.querySelector('.card').addEventListener('click', function(e) {
	if (e.target.nodeName !== 'I') return;
	e.target.parentNode.parentNode.classList.toggle('flip');
});

html, body {
  height: 100%;
  background: linear-gradient(90deg, #9EFFBE 0, #F4FFC7 45%, #F4FFC7 55%, #ADFCFF 100%);
}

.logo {
  background: yellow;
  border: 8px solid #fff;
  border-radius: 50%;
  display: block;
  height: 120px;
  margin: 1em auto;
  width: 120px;
}

.item {
  border: 1px solid transparent;
  display: flex;
  height: 170px;
  margin: 0 auto .75em;
  perspective: 800px;
  position: relative;
  width: 40%;
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card i {
  cursor: pointer;
  display: inline-block;
  position: absolute;
  right: .5em;
  bottom: .5em;
}

.card.flip {
  transform: rotateY(180deg);
}

.card--front {
  background: rgba(255, 255, 255, 0.33);
  border: 1px solid #fff;
  position: relative;
}

.card--back {
background: #D9FAEF;
background: rgba(255, 255, 255, 0.33);
text-align: center;
position: relative;
transform: rotateY(180deg);
}

Answer 1

修改

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