I am aiming to implement a card flip effect using the provided code within a row of a bootstrap 4 container.
<div class="container">
<div class="row" >
<div class="card-container col-sm-4">
<div class="card card-front" >
<img class="card-img-top" src="image/1.JPG" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">1</h5>
</div>
</div>
<div class="card card-back" >
<div class="card-body">
<p class="font-weight-light">
Some back text
</p>
</div>
</div>
</div>
<div class="card-container col-sm-4">
<div class="card card-front" >
<img class="card-img-top" src="image/2.JPG" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">2</h5>
</div>
</div>
</div>
<div class="card-container col-sm-4">
<div class="card card-front">
<img class="card-img-top" src="image/3.JPG" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">1</h5>
</div>
</div>
</div>
</div>
</div>
Both the second and third cards do not have a backside yet. Nevertheless, the backside of these cards will be similar to the first card's design. Provided below is the CSS for achieving this effect:
.card-container{
position: relative;
perspective: 200rem;
}
.card-container:hover .card-front{
transform: rotateY(180deg);
}
.card-container:hover .card-back{
transform: rotateY(0deg);
}
.card-back{
transform: rotateY(180deg);
}
.card{
position: absolute;
transition: all 0.9s;
backface-visibility: hidden;
}
The issue arises when implementing position: absolute, causing the height of the container to shrink to 1px. Is there a workaround for this problem? Alternatively, are there better methods to achieve the desired outcome? Attempts such as adding position: relative to both row and container have been futile so far.