Bootstrap 翻转卡正面和背面不是彼此的顶部答案

【问题标题】：Bootstrap flip-card front and back not an top of each otherBootstrap 翻转卡正面和背面不是彼此的顶部
【发布时间】：2021-04-26 00:11:18
【问题描述】：

我是 HTML/CSS/Bootstrap 的新手，所以希望我的问题的解决方案对你们中的一个人来说是显而易见的。

我正在创建一张正面和背面包含彩色表格的翻转卡片（正面和背面将显示不同的信息）。

为了给这个表格提供“轴标签”，我在左侧和彩色表格条目下方添加了一个额外的列。我在翻转卡的正面和背面都有这个表 + 轴标签。当卡片被翻转时，正面的部分 + 轴标签在背面卡片的右侧可见。我怎样才能把卡片放在一起，这样当背面朝上时，正面的任何部分都看不到？（其实也应该有轴标注，但不知怎么在sn-p代码中显示不正确，所以我把它注释掉了。

.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>

【问题讨论】：

.table#risikomatrix { 宽度：90%;高度：90%；边距：自动；这是你需要的吗？
这太棒了，非常感谢！ :) 我已经花了几个小时试图弄清楚...
太好了，我会在回答的同时添加一些解释

标签： html css bootstrap-4

【解决方案1】：

首先，不要给多个元素赋予相同的 ID，保持它们唯一，这显然是不好的做法，并且会在涉及 JS 时引起问题。

答案：

.table#risikomatrix {
    width: 90%;
    height: 90%;
    margin: auto;
}

<table> 是一个 block level 元素，这意味着如果 margin: auto 在左侧和右侧，如果它们不是父元素的 100% 宽度，则可以将它们居中。

在您的情况下，您需要将它们居中，因为后桌在翻转时向右对齐，而前面在左侧。

【讨论】：