CSS渲染平面

Question

我有一个简单的示例，可以在这里查看：

.card {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: tomato;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  perspective: 700px;
}

.plane {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 15px;
  background: #ee8c25;
  transition: transform 1000ms linear;
  box-sizing: border-box;
}

.plane:first-child {
  /*transform: rotateY(180deg);*/
}

.plane:last-child {
  /*transform: rotateY(180deg);*/
  background: #d14730;
  backface-visibility: visible;
}

<div class="card">
  <div class="plane">First Plane</div>
  <div class="plane">Second Plane</div>
</div>

有问题的代码就是这个

.plane:first-child {
  /*transform: rotateY(180deg);*/
}

.plane:last-child {
/*   transform: rotateY(180deg); */
  background: #d14730;
  backface-visibility: visible;
}

它包含两个绝对定位的元素，它们占据了父元素的整个空间。之所以将第二个平面显示在第一个平面之上，是因为它在源代码中排在后面，我明白了。

我不明白的是，为什么当第二个.plane元素旋转180度时，它不再位于前一个元素的前面，而是转到“后退”。但是，如果第一个.plane旋转而第二个没有旋转，则第一个仍在前面，它不会像第二个元素一样向后退。

这是怎么回事？

Answer 1

如果删除transform-style: preserve-3d;，则它会在同一平面上完成。我猜这是有道理的，因为它是在第一个.plane的前面过渡。

我不确定您是否可以在保留3d空间的同时进行转换并使它在第一个.plane以上完成。因为如果元素在Y轴上旋转180度并在3D空间中渲染，那么这意味着它们将远离一切。元素的样式将与从正面出现的样式完全相同，但在背面则相反。 Z轴基本上像镜子一样。

请参阅下面的代码（删除了transform-style: preserve-3d;），并在上面的gif中显示了通过控制台激活transform: rotateY(180deg) css时的结果。

.card {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: tomato;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /*transform-style: preserve-3d;*/
  perspective: 700px;
}

.plane {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 15px;
  background: #ee8c25;
  transition: transform 1000ms linear;
  box-sizing: border-box;
}

.plane:first-child {
  /*transform: rotateY(180deg);*/
}

.plane:last-child {
  /*transform: rotateY(180deg);*/
  background: #d14730;
  backface-visibility: visible;
}

<div class="card">
  <div class="plane">First Plane</div>
  <div class="plane">Second Plane</div>
</div>