Div 在 parent 上使用 transform: rotateY 和 child 上的 position: relative 时消失

Question

我已经设置了一个代码笔，这样你就可以看到发生了什么。在最右边的翻转卡片上，child div 在我旋转时消失了。

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

同样奇怪的是它只发生在最右边div。如果有人可以提供帮助，甚至可以解释为什么会这样，那就太好了。

谢谢

麦考伊

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

Answer 1

您只需添加

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

到定位元素，所以.flimage和.fllogo

Div 在 parent 上使用 transform: rotateY 和 child 上的 position: relative 时消失

Div disappearing when using transform: rotateY on parent, and position: relative on child

html

css

css-transforms