变换和堆叠顺序

Question

我试图了解 CSS 的“3d”世界到底发生了什么。 我做了一个简单的example

尤其是最让我烦恼的代码是：

.back {
    background-color: tomato;
    transform: rotateY(180deg);
    z-index: 1;
}

我不清楚的是为什么当你将鼠标悬停在 .inner 上时，它的背景颜色（金色）不可见？如果从 .back 中删除 transform 属性，或者将 rotateY 设置为 0deg，则 .inner 的金色背景颜色清晰可见。 为什么.back的transform属性会改变堆叠顺序？

从逻辑上讲，子项（.front 和 .back）应该出现在其父项（.inner）的前面。

另外，我想知道当你将 transform-style 设置为 flat 时会发生什么？这是否会使父级及其所有子级折叠成单个“单元”，其中具有最高堆叠顺序的元素具有优先级/可见性？

Answer 1

在您的代码中：

.outer {
  display: block;
  width: 200px;
  height: 200px;
  border: 2px solid gold;
  perspective: 1000px;
  padding: 10px;
  margin: 0 auto;
}

.inner {
  position: relative;
  height: 100%;
  width: 100%;
  transition: transform 2s linear;
  transform-style: preserve-3d;
  background-color: gold;
  backface-visibility: visible;
  transform: rotateY(50deg);
}

.sides {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  color: white;
  backface-visibility: hidden;
}

.front {
  background-color: blue;
  transform: translateZ(20px)
}

.back {
  background-color: tomato;
  transform: rotateY(180deg) translateZ(10px);
}

.inner:hover {
  transform: rotateY(180deg)
}

<div class="outer">
  <div class="inner">
    <div class="sides front">Front Side</div>
    <div class="sides back">Back Side</div>
  </div>
</div>

你正在使用

  transform: rotateY(180deg) translateZ(10px);

变换是从右到左应用的，所以首先它转到前面 10px。但在那之后，它旋转了180度。 （围绕恒定的变换原点）。这使得之前的 10px 朝向后面而不是前面。

如果顺序是相反的

  transform: translateZ(10px) rotateY(180deg);

现在旋转首先完成，因此平移不受它的影响并转到前面。

和否，抱歉，z-index 不能替代 3-d 变换，如果你想使用 3d 变换，平移是唯一的方法......

在你的第一个例子中，z-index 是没用的，很容易看出

codepen with z-index removed

这有效，因为您正在设置

backface-visibility: hidden;

所以只有朝前的脸才会可见