As a beginner in HTML/CSS/Bootstrap, I'm hoping someone can help me with my issue.
I'm working on creating a flip card that features a colored table on both the front and back, with different information displayed on each side. To add "axis labeling" to the table, I've included an extra column on the left side and below the entries. This table + axis labeling appears on both sides of the flip card. However, when the card is flipped, parts of the front + the axis labeling are visible to the right of the backside-card. How can I stack the cards on top of each other so that no part of the front side is visible when the back is up? (There should be axis labeling as well, but it does not display correctly in the code snippet so I have 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...