如何将 Bootstrap 翻转卡的背面定位在与正面相同的位置？

Question

我需要一些关于引导翻转卡的帮助。 我尝试创建一个 Bootstrap 翻转卡，但我不知道如何让背面与正面位于同一位置。有人可以帮帮我吗？

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

Answer 1

将card-back 的position: relative 更改为position: absolute，这样它就会粘在card-front 之上。

.card-flip {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
 }

.card-flip>div {
  backface-visibility: hidden;
  transition: transform 300ms;
  transition-timing-function: linear;
  /* margin: 0; */
  /* display: flex; */
}

.card-front {
  transform: rotateY(0deg);
}

.card-back {
  transform: rotateY(180deg);
  position: absolute;
  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>

编辑我已将flex-box 属性添加到card-flip。所以它会将位置设置在中心。