html - 将 2 个 div 相互重叠放置时，如果其中一个旋转 180 度，则它在可见性层次结构中处于次要位置。这是为什么？

Question

在学习一点 HTML 时，我遇到了一些我无法理解的东西。

当我将 2 个 div 放在彼此之上时，我注意到如果第二个 div 旋转 180 度(即 transform:rotateY(180deg))，则会显示第一个，反之亦然(至少在 Chrome 上)。有人可以向我解释它是如何工作的或者规则是什么吗？它与 z-indexing 有什么关系吗？

这是一个说明我的问题的代码: https://jsfiddle.net/psgqktcn/3/

.card {
  height: 80px;
  width: 50px;
  line-height: 80px;
  font-size: 60px;
  position: absolute;
  text-align: center;
  transform-style: preserve-3d;
}

.card .front1 {
  background: red;
}

.card .back1 {
  background: green;
}

.card .front2 {
  background: red;
  transform: rotateY(180deg);
}

.card .back2 {
  background: green;
  transform: rotateY(180deg);
}

.card figure {
  position: absolute;
  height: 100%;
  width: 100%;
  color: white;
}

<div class=card class=flipped>
  <figure class="front1">1</figure>
  <figure class="back1">2</figure>
</div>

<div class=card class=flipped style="margin: 0 100px">
  <figure class="front2">1</figure>
  <figure class="back1">2</figure>
</div>

<div class=card class=flipped style="margin: 0 200px">
  <figure class="front1">1</figure>
  <figure class="back2">2</figure>
</div>

Answer 1

使用backface-visibility:

.card {
  height: 80px;
  width: 50px;
  line-height: 80px;
  font-size: 60px;
  position: absolute;
  text-align: center;
  transform-style: preserve-3d;
}

.card .front1 {
  background: red;
}

.card .back1 {
  background: green;
}

.card .front2 {
  background: red;
  transform: rotateY(180deg);
}

.card .back2 {
  background: green;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

.card figure {
  position: absolute;
  height: 100%;
  width: 100%;
  color: white;
}

<div class=card class=flipped>
  <figure class="front1">1</figure>
  <figure class="back1">2</figure>
</div>

<div class=card class=flipped style="margin: 0 100px">
  <figure class="front2">1</figure>
  <figure class="back1">2</figure>
</div>

<div class=card class=flipped style="margin: 0 200px">
  <figure class="front1">1</figure>
  <figure class="back2">2</figure>
</div>