转换和堆叠顺序

Question

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

特别是最让我烦恼的代码是：

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

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

从逻辑上讲，children(.front and .back) 应该出现在 parent(.inner) 的前面。

此外，我想知道当您将 transform-style 设置为 flat 时到底发生了什么？这是否会使 parent 及其所有 children 折叠成单个“单元”，其中具有最高堆叠顺序的元素占用 priority/visibility？

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

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

如果顺序是相反的

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

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

and No, 抱歉，z-index 不能替代 3-d 变换，如果你想使用 3d 变换，翻译是唯一的方法.. ..

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

codepen with z-index removed

这行得通是因为您正在设置

backface-visibility: hidden;

所以只有面向前方的脸才会可见

转换和堆叠顺序

Transform and Stacking Order

css

z-index

css-transforms