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;

因此只有面向前方的脸部才会可见

转换和堆叠顺序

1 个答案: