Bootstrap flip-card front and back not an top of each other - html

Question

I am new to HTML/CSS/Bootstrap, so hopefully the solution of my problem is obvious to one of you.
I am creating a flip card that contains a coloured table on the front and on the back (different information will be displayed on front and back).
To provide "axis labeling" to this table I add one extra column on the left side and below the colored table entries. I have this table + axis labeling on the front and back side of the flip card. When the card is fliped parts of the front + the axis labeling are visible to the right of the backside-card . How can I put the cards on top of each other so no part of the front side is visible when the back is up? (Actually there should be axis labeling as well, but somehow it does not show correctly in the code snippet so I commented it out.
.table#risikomatrix{
width: 90%;
height: 90%;
}
.table td{
border-top: 0px solid #121416;
}
#left_axis_front{
background-color: white;
border-right: 3px solid black;
width: 0%;
vertical-align: middle;
}
#left_axis_label{
background-color: white;
transform: rotate(-90deg) translateY(-18px) translateX(-110px);
width: 0%;
height: 0%;
position: absolute;
white-space: nowrap;
font-size: 14pt;
}
#lower_axis{
border-top:3px solid black; ;
}
#lower_axis_label{
background-color: white;
transform:translateY(-12px) translateX(50%);
width: 50%;
height: 0%;
white-space: nowrap;
font-size: 14pt;
}
.cell{
width: 33.33%;
position: relative;
}
.cell::after {
content: '';
display: block;
margin-top: 100%;
}
.card {
background-color: white;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 1px solid #f1f1f1;
/* Centered alignment in card */
text-align: center;
display: flex;
justify-content: center;
}
.card#yellow{
background-color: gold;
}
.card#red{
background-color: red;
}
.card#green{
background-color: green;
}
.flip-card-big {
background-color: white;
width: 40%;
height: 40%;
/* perspective: 1000px; Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-big-inner {
background-color: white;
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
/* align-self: center; */
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card-big:hover .flip-card-big-inner{
background-color: white;
transform: rotateY(-180deg);
}
/* Position the front and back side */
.flip-card-big-front {
background-color: white;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
.flip-card-big-back {
background-color: white;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-big-front {
background-color: white;
color: rgb(255, 255, 255);
text-align: middle;
}
/* Style the back side */
.flip-card-big-back{
background-color: white;
color: rgb(255, 255, 255);
transform: rotateY(180deg);
}
<div class="container" style="height: 300px;">
<div class="row">
<div class="col-sm d-flex justify-content-sm-center" >
<div class="flip-card-big">
<div class="flip-card-big-inner">
<div class="flip-card-big-front">
<table class="table" id="risikomatrix">
<tr>
<td rowspan="3" id="left_axis_front">
<!-- <div id="left_axis_label">Instabilität</div> -->
</td>
<td class="cell">
<div class="card" id="yellow">
<div style="font-size: 40pt;" id="fm1">
</div>
</div>
</td>
<td class="cell">
<div class="card" id="red">
<div style="font-size: 40pt;" id="fm2">
</div>
</div>
</td>
<td class="cell">
<div class="card" id="red">
<div style="font-size: 40pt;" id="fm3">
</div>
</div>
</td>
</tr>
<tr>
<td class="cell">
<div class="card" id="green">
<div style="font-size: 40pt;" id="fm1">
</div>
</div>
</td>
<td class="cell">
<div class="card" id="yellow">
<div style="font-size: 40pt;" id="fm2">
</div>
</div>
</td>
<td class="cell">
<div class="card" id="red">
<div style="font-size: 40pt;" id="fm3">
</div>
</div>
</td>
</tr>
<tr>
<td class="cell">
<div class="card" id="green">
<div style="font-size: 40pt;" id="fm1">
</div>
</div>
</td>
<td class="cell">
<div class="card" id="green">
<div style="font-size: 40pt;" id="fm2">
</div>
</div>
</td>
<td class="cell">
<div class="card" id="yellow">
<div style="font-size: 40pt;" id="fm3">
</div>
</div>
</td>
</tr>
<tr>
<td></td>
<td colspan="3" id="lower_axis">
<!-- <div id="lower_axis_label">Auslauflänge</div> -->
</td>
</tr>
</table>
</div>
<div class="flip-card-big-back">
<table class="table" id="risikomatrix">
<tr>
<td rowspan="3" id="left_axis_front">
<!-- <div id="left_axis_label">Instabilität</div> -->
</td>
<td class="cell">
<div class="card" id="yellow">
<div style="font-size: 40pt;" id="fm1">
</div>
</div>
</td>
<td class="cell">
<div class="card" id="red">
<div style="font-size: 40pt;" id="fm2">
</div>
</div>
</td>
<td class="cell">
<div class="card" id="red">
<div style="font-size: 40pt;" id="fm3">
</div>
</div>
</td>
</tr>
<tr>
<td class="cell">
<div class="card" id="green">
<div style="font-size: 40pt;" id="fm1">
</div>
</div>
</td>
<td class="cell">
<div class="card" id="yellow">
<div style="font-size: 40pt;" id="fm2">
</div>
</div>
</td>
<td class="cell">
<div class="card" id="red">
<div style="font-size: 40pt;" id="fm3">
</div>
</div>
</td>
</tr>
<tr>
<td class="cell">
<div class="card" id="green">
<div style="font-size: 40pt;" id="fm1">
</div>
</div>
</td>
<td class="cell">
<div class="card" id="green">
<div style="font-size: 40pt;" id="fm2">
</div>
</div>
</td>
<td class="cell">
<div class="card" id="yellow">
<div style="font-size: 40pt;" id="fm3">
</div>
</div>
</td>
</tr>
<tr>
<td></td>
<td colspan="3" id="lower_axis">
<!-- <div id="lower_axis_label">Auslauflänge</div> -->
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

First off, don't give multiple elements the same ID, keep them unique, plain bad practice and will cause issues when JS gets involved.
Answer:
.table#risikomatrix {
width: 90%;
height: 90%;
margin: auto;
}
The <table> is a block level element, which means you can center them if you have margin: auto on the left and right if they're not 100% width of the parent.
In your case you needed to center them because the back table was aligned to the right when flipped while the front was to the left.