CSS - 翻轉後在背面可見的元素

Question

我正在處理CSS翻轉卡，並遇到此問題，儘管backface-visibility: hidden;元素仍然可從另一側看到。

如果運行（這裏簡化）片斷，然後點擊more在右下角 - 卡片翻轉，但more保持可見。這可能是因爲position: absolute，因爲其他元素的行爲如預期。

所以我的問題 - 是否有可能解決這個問題（最好只用CSS）並且仍然具有半透明背景？

document.querySelector('.card').addEventListener('click', function(e) { 
 
\t if (e.target.nodeName !== 'I') return; 
 
\t 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; 
}