I'm a begenner and trying tomake the card flip on hover (to show the back side of the card when hover), I've followed a couple videos on YouTube. I kind of got the concept of how to do it, but I can't get the backface-visibility:hidden to work properly.
Here's the my scss code:
.card {
perspective: 150rem;
-moz-perspective: 150rem;
height: 400px;
width: 300px;
&:hover &__content {
transform: rotateY(180deg);
}
&__content {
position: relative;
height: 100%;
transition: all 2.5s;
transform-style: preserve-3d;
width: 100%;
}
&__side {
position: absolute;
backface-visibility: hidden; *
height: 100%;
width: 100%;
}
&__front {
background-color: #333;
background: url(../01_card_flip/img/love.jpg) no-repeat center center/cover;
}
&__back {
background-color: pink;
transform: rotateY(180deg);
}
}
Here's the HTML
<body>
<div class="card">
<div class="card__content">
<div class="card__side card__front"></div>
<div class="card__side card__back">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
</div>
</div>
When I have the backface-visibility:hidden;, everything seems normal, but when I hover over it, I can only see the backside of card__front, but card__back is gone. And I have no idea why, please help!