当使用transform时，div消失：父级上的rotateY和位置：子级上的相对

如何解决当使用transform时，div消失：父级上的rotateY和位置：子级上的相对

我已经设置了一个Codepen，以便您可以看到发生了什么。在最右边的翻页纸牌上，当我旋转它时，子div消失了。

https://codepen.io/McCoy101/pen/BaKNEOr

这与子元素上的 position 属性有关，因为当我删除它时，它可以正常工作，但是不幸的是，我需要相对于徽标div定位的位置。

奇怪的是，它仅在最右边的div上发生。如果有人能帮助甚至解释为什么会发生，那将很棒。

谢谢

McCoy

HTML：

<div id="flipcards">

  <div class="flip-card-container"><!--start card-->
    <div class="flip-card">

      <div class="flip-card-front">
        <div class="flimage">Picture
          <div class="fllogo">Logo</div>
        </div>
      </div>

      <div class="flip-card-back">
        <div class="flipbackinner">
          <p>Text here</p>
        </div>
      </div>

    </div>
  </div><!--end card-->

  <!--Repeat card 4 times-->


</div>

CSS：

#flipcards {
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
}

.flip-card-container {
    width:260px;
    height:390px;
    perspective:600px;
    text-align:center;
    margin-bottom:35px;
}
.flip-card {
    position:relative;
    width:100%;
    height:100%;
    transition:transform 5s;
    transform-style:preserve-3d;
}
.flip-card-container:hover .flip-card {
    transform:rotateY(180deg);
}
.flip-card-front,.flip-card-back {
    position:absolute;
    width:100%;
    height:100%;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}
.flip-card-front {
    background-color:#324C9A;
}
.flip-card-back {
    background-color:#3C5AB5;
    transform:rotateY(180deg);
}
.flimage {
    border:2px solid #FFF;
    margin:13px 13px 0px;
    position:relative;
  background-color:red;
  height:300px;
}
.fllogo {
  width:70px;
  height:70px;
  position:absolute;
  top:0px;
  right:0px;
  background-color:yellow;
}

解决方法

您只需添加

-webkit-backface-visibility:hidden;
backface-visibility:hidden;

定位的元素，因此.flimage和.fllogo