Question

设置transform-style: preserve-3d并将元素旋转180度时，我发现异常行为。看来这会导致旋转后的元素落后于其他元素，就像将z-index设置为较低的值一样。

这里是一个示例：

.parent {
  transform-style: preserve-3d;
  position: relative;
}

.card {
  position: absolute;
  width: 100px;
  height: 100px;
}

.card.red {
  background-color: red;
}

.card.blue {
  background-color: blue;
}

.rotated {
  transform: rotateY(180deg);
}

<div class="parent">
  <div class="card red"></div>
  <div class="card blue rotated"></div>
</div>

使用Chrome时，（旋转的）蓝卡位于HTML的顶部，但可以看到红卡。将z-index授予蓝卡似乎也没有任何作用。

我在任何地方都找不到它的记录-这是故障还是预期的行为？有没有办法确保显示蓝卡（同时保留transform-style: preserve-3d）？

编辑：：Firefox中似乎不存在此行为。但是，目前尚不清楚这是Chrome还是Firefox的问题。

Answer 1

transform-style:preserve-3d表示“元素的子元素应位于（相同的）3D空间中” 。这意味着，如果将3d转换应用于它们，它们将相应地呈现。

现在，您的两个元素都具有完全相同的z-index值。默认情况下，它是auto，它对应于0。
但是，如果您在Y轴或X轴上将元素旋转180deg，则它基本上会翻转。这意味着它将位于同一z-index值的另一端（因为您设置了transform-style:preserve-3d）。这意味着它将位于堆栈的另一端（从其正常位置开始-在其先前的同级项之上）。

因此，您可以专门给它更大的z-index或切换位置。

要了解更多有关此行为的信息，请使用rotateY。考虑到3d空间中的旋转角度，您会注意到在其他值时只有元素的一半可见，也就是离您更近的一半。

在90和270度，它是垂直的（没有宽度）将是不可见的，而在180，它是“完全” 旋转的在3d空间中，这意味着它位于具有相同z-index值的另一个元素的后面，并且（在技术上）位于它的“后面”。

另一个“解决方案”是将preserve-3d从父项中移除（或将其移到子项中，正如I.Johnson建议的那样），因此这2个元素分别在各自的空间中呈现，并且每个该空间将根据其在堆叠上下文中各自的元素位置进行堆叠。

Answer 2

使用transform-style属性时，必须将其与transform属性一起使用。

将transform-style: preserve-3d;属性添加到.rotated类中将显示蓝卡

.rotated {
  transform: rotateY(180deg);
  transform-style: preserve-3d;
}

示例： https://codepen.io/IanJohnson/pen/jXGVVo?editors=1100

Answer 3

~~我认为这是因为DIV的背面不一定与正面相同。因此，在Y轴上旋转，您会看到DIV的背面/不可见/透明面。如果沿Z轴旋转，则可以看到DIV的同一面。~~

更新：@fstanis指出我的透明后盾是不正确的。因此，如果Z轴与Y轴仍能按预期运行，那么我实际上不是100％知道为什么：）

.parent {
  transform-style: preserve-3d;
  position: relative;
}

.card {
  position: absolute;
  width: 100px;
  height: 100px;
}

.card.red {
  background-color: red;
}

.card.blue {
  background-color: blue;
}

.rotated {
  transform: rotateZ(175deg);
}

<div class="parent">
  <div class="card red"></div>
  <div class="card blue rotated"></div>
</div>

Answer 4

因为两张卡具有相同的z-index 如果您将HTML更改为：

<div class="parent">
  <div class="card red"></div>
</div>
<div class="parent">
  <div class="card blue rotated"></div>
</div>

它将渲染蓝色的

旋转180度的元素最终位于其他元素之后

4 个答案: