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

Question

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

如果您运行(此处简化)片段并点击右下角的more - 卡片翻转，但more 保持可见。这可能是因为 position: absolute，因为其他元素的行为符合预期。

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

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);
}

<article class="item">
  <div class="card">
    <figure class="card--front">
      <div class="logo"></div>
      <i class="icon icon--info-circled">more</i>
    </figure>
    <figure class="card--back">
      <i class="icon icon--cancel-circled">close</i>
    </figure>
  </div>
</article>

Answer 1

编辑

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