带引导程序 4 的 CSS 翻转卡

Question

我将这里的各种帖子和 w3c 关于制作翻转卡的教程与 bootstrap 4 结合使用。

我有它的工作 execpt 背面与正面的高度不同。 （我还没有在后面添加有意义的文本）我确定我错过了一些东西，比如在某处添加 H-100，但似乎无法找到我要去的地方。

你们有没有看到我的代码中有任何问题？

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

我的 CSS 是...

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

更新：我想我找到了答案……

我已将 H-100 添加到 <div class="card h-100 shadow-sm"> 还有...

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

现在只需要将卡片中的文本垂直居中，我们都很好:-)

Answer 1

带有引导程序 4 的 CSS 翻转卡

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