There’s the HTML code:
<body>
<section>
<div class="card-item">
<div class="card-item__side front">
<div class="card-info">
<h2>Here is the information</h2>
<p>Flip the card</p>
</div>
</div>
<div class="card-item__side back">
<div class="card-info">
<p>The card is flipped</p>
</div>
</div>
</div>
</section>
</body>
And CSS code:
section {
display: flex;
margin: 0;
padding: 0;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.card-item__side {
border: 1px solid black;
width: 350px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.card-item {
position: relative;
transform-style: preserve-3d;
}
.back {
position: absolute;
top: 0;
left: 0;
transform: rotateY(-180deg);
}
.card-item__side {
backface-visibility: hidden;
}
.card-item:hover {
transform: rotateY(180deg);
}
So when I am trying to hover over a card on its front side it shows me the backside content including the front side content being mirrored (instead of front side being disappeared as I expected when I used backface-visibility property. What’s the problem and how to solve it?
Maybe the problem is with the HTML markup, the elements laid out in the wrong way?