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;)并查看上面显示激活 transform: rotateY(180deg) css 时的结果的 gif通过控制台。

.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>