I encountered an issue while working on a CSS flip card project. Despite using backface-visibility: hidden;, one element remains visible from the other side.
In the simplified snippet provided, if you click on more in the bottom right corner, the card flips but the more text stays visible. This seems to be due to the position: absolute property, as the other elements behave as expected.
My question is - is there a way to resolve this issue (ideally with CSS only) and still maintain a semi-transparent background?
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>