Can someone assist me with a bootstrap flip card issue I'm facing? I've been trying to create a Bootstrap flip card, but I can't seem to align the back side properly with the front side. Any help would be greatly appreciated!
.card-flip>div {
backface-visibility: hidden;
transition: transform 300ms;
transition-timing-function: linear;
width: 100%;
height: 100%;
/* margin: 0; */
/* display: flex; */
}
.card-front {
transform: rotateY(0deg);
}
.card-back {
transform: rotateY(180deg);
position: relative;
top: 0;
}
.card-flip:hover .card-front {
transform: rotateY(-180deg);
}
.card-flip:hover .card-back {
transform: rotateY(0deg);
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css" rel="stylesheet">
<header>
<nav class="navbar navbar-expand-md">
<div class="navbar-brand">
<strong>Header</strong>
</div>
</nav>
</header>
<main style="min-height: calc(100vh - 111px); display: inline-block; width: 100%;">
<div class="card-flip h-100">
<div class="container my-5 z-depth-3 p-3 card-front">
<h3 class="text-center display-4 mb-4">Front</h3>
</div>
<div class="container my-5 z-depth-3 p-3 card-back">
<h3 class="text-center display-4 mb-4">Back</h3>
</div>
</div>
</main>
<footer class="page-footer text-center font-small black-text">
<div class="py-1">
Footer
</div>
</footer>