CODEWITHSUNDEEP
css
Zoltan Toth
Zoltan Toth

Reputation: 47667

CSS - Element visible on backface after flip

I'm working on a CSS flip card and ran into this issue, when despite backface-visibility: hidden; an element still visible from the other side.

If you run the (simplified here) snippet and click more in the bottom right corner - the card flips, but the more stays visible. It's probably because of the position: absolute, because the other element behaves as expected.

So my question - is it possible to fix that (preferably with CSS only) and still have the background semi-transparent? 

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>

Upvotes: 2

Views: 1880

Answers (1)

Waxi
Waxi

Reputation: 1651

EDIT

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

Upvotes: 2

Related Questions