CSS flip card with bootstrap 4 - css

Question

I am using an amalgamation of the various posts here and the w3c tutorial on making flip cards work with bootstrap 4.
I have it working execpt for the back face is not the same height as the front face. (I have yet to add meaningful text to the back) I am sure I am missing something like adding a H-100 somewhere but can't seem to get to where I am going wrong.
Could any of you see any issues in my code?
<a href="" class="">
<div class="card-flip">
<div class="card-flip-inner">
<div class="card-flip-front">
<div class="card shadow-sm">
<div class="card-body">
<div class="row">
<div class="col text-center">
<i class="fas fa-route fa-3x text-msp-orange"></i>
</div>
<div class="col-10 text-right">
<h3 class="text-msp-darkblue text-uppercase mb-0"><b><?php echo $log->post_title; ?></b></h3>
<p class="text-secondary mt-0">
<?php echo $log->post_description; ?>
</p>
</div>
</div>
<hr />
<div class="row">
<div class="col">
<p class="text-secondary text-justify mb-0 pb-0">
<?php echo shortenEcho($log->post_body, 250); ?>
</p>
<span class="text-secondary float-right mt-0 pt-0"><?php echo date('D jS F Y', strtotime($log->post_createdOn)); ?></span>
</div>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center text-secondary card-vertical-divider">
<i class="fas fa-wind fa-2x text-msp-lightblue"></i><br />
<b>Force 4</b>
</div>
<div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center text-secondary card-vertical-divider">
<i class="fas fa-water fa-2x text-msp-lightblue"></i><br />
<b>Moderate</b>
</div>
<div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-secondary text-center">
<i class="fas fa-cloud-sun fa-2x text-msp-lightblue"></i><br />
<b>Sunny</b>
</div>
</div>
</div>
</div>
</div>
<div class="card-flip-back h-100">
<div class="card shadow-sm bg-msp-lightblue">
<div class="card-body text-white h-100">
some text
</div>
</div>
</div>
</div>
</div>
</a>
And my CSS is...
.card-flip {
perspective: 1000px;
}
.card-flip-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
backface-visibility: hidden;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.card-flip:hover .card-flip-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.card-flip-front, .card-flip-back {
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the back side */
.card-flip-back {
transform: rotateY(180deg);
position: absolute;
top: 0;
left: 0;
}
UPDATE: I think I have found the answer...
I have added a H-100 to the <div class="card h-100 shadow-sm">
And also to the...
<div class="card-flip-back">
<div class="card shadow-sm h-100 bg-msp-lightblue">
<div class="card-body mx-auto text-white h-100">
some text
</div>
</div>
Just need to center the text in the card vertically now and we are all good :-)

Answer 1

CSS flip card with bootstrap 4
.flip-card {
width: 300px;
height: 300px;
perspective: 1000px;
transition: 0.3s;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-back {
transform: rotateY(180deg);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card shadow-sm">
<div class="card-flip-front">
<div class="card shadow-sm">
<div class="card-body">
<div class="row">
<div class="col text-center">
<i class="fas fa-route fa-3x text-msp-orange"></i>
</div><!-- end col-->
<div class="col-10 text-right">
<h3 class="text-msp-darkblue text-uppercase mb-0"><b></b></h3>
<p class="text-secondary mt-0"> </p>
</div><!-- end col-10-->
</div><!-- end row -->
<hr />
<div class="row">
<div class="col">
<p class="text-secondary text-justify mb-0 pb-0"> </p>
<span class="text-secondary float-right mt-0 pt-0"></span>
</div><!-- end col-->
</div><!-- end row -->
</div><!-- end card body -->
<div class="card-footer">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center text-secondary card-vertical-divider">
<i class="fas fa-wind fa-2x text-msp-lightblue"></i><br />
<b>Force 4</b>
</div><!-- end col-sm-12 col-md-12 col-lg-4 col-xl-4-->
<div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center text-secondary card-vertical-divider">
<i class="fas fa-water fa-2x text-msp-lightblue"></i><br />
<b>Moderate</b>
</div><!-- end col-sm-12 col-md-12 col-lg-4 col-xl-4-->
<div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-secondary text-center">
<i class="fas fa-cloud-sun fa-2x text-msp-lightblue"></i><br />
<b>Sunny</b>
</div><!-- end col-sm-12 col-md-12 col-lg-4 col-xl-4-->
</div><!-- end row -->
</div><!-- end card footer -->
</div><!-- end card -->
</div><!-- end card flip front -->
</div><!-- end card -->
</div><!-- end card flip front -->
<div class="flip-card-back">
<div class="card shadow-sm ">
<div class="card-body text-dark h-100">
some text
</div><!-- end card body -->
</div><!-- end card -->
</div><!-- end card flip back -->
</div><!-- end card flip inner -->
</div><!-- end card flip -->