Bootstrap翻转卡片问题：正面文本背景翻转时短暂显示在背面

使用Bootstrap实现卡片翻转动画时，正面卡片图片上的标题文本叠加层（.centered-text-div）在卡片执行翻转动画的过程中，其背景色与标题文本会短暂出现在背面卡片上，持续数毫秒。

该异常源于绝对定位的.centered-text-div未继承父元素.flipbox_font的backface-visibility: hidden属性，在3D翻转的中间阶段，这个元素会脱离父元素的3D渲染上下文，导致其背面状态短暂暴露。

给.centered-text-div添加backface-visibility: hidden属性，让它和父元素同步隐藏背面；同时添加transform-style: preserve-3d强化3D上下文继承，避免渲染异常。

修改后的.centered-text-div样式代码：

.centered-text-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 1); /* 修正原代码注释格式错误 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

以下是修复后的完整代码，可直接运行验证效果：

CSS部分 #

.flipbox {
  perspective: 1000px;
  position: relative;
  transform-style: preserve-3d;
  z-index: 1;
  margin-bottom: 40px;
  width: 100%;
}

.flipbox_inner {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s ease;
}

.flipbox_font,
.flipbox_back {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateX(0);
  -webkit-transform: rotateX(0);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform 0.7s ease, -webkit-transform 0.7s ease;
}

.flipbox_font {
  background: #fff;
  transform: rotateY(0deg);
}

.flipbox:hover .flipbox_font {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flipbox_back {
  background: #343a40;
  text-align: center;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.flipbox:hover .flipbox_back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.flipbox .flipbox_back h3 {
  color: #fff;
  font-weight: 700;
  font-size: 1.25rem;
}

.centered-text-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

@media (min-width: 768px) {
  .padyatri_team .col-md-3 {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media only screen and (max-width: 575px) and (min-width: 479px) {
  .padyatri_team .col-6 {
    -ms-flex: 0 0 33.33%;
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }
}

HTML部分 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"/>

<section class="team py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="flipbox">
          <div class="flipbox_inner">
            <div class="flipbox_font">
              <img src="https://placehold.co/300x300" class="img-fluid" alt="Sample Image">
              <div class="centered-text-div">
                <h5>some Text</h5>
              </div>
            </div>
            
            <div class="flipbox_back">
              <h3>Text on the Back</h3>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="flipbox">
          <div class="flipbox_inner">
            <div class="flipbox_font">
              <img src="https://placehold.co/300x300" class="img-fluid" alt="Sample Image">
              <div class="centered-text-div">
                <h5>some Text</h5>
              </div>
            </div>
            
            <div class="flipbox_back">
              <h3>Text on the Back</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"></script>

内容的提问来源于stack exchange，提问作者AbdulAziz