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

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

我认为这是因为 DIV 的背面不一定与正面颜色相同。因此，在 Y 轴上旋转，您会看到 DIV 的 back/invisible/transparent 侧。如果您在 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 2

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

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

它将渲染蓝色

Answer 3

使用变换样式属性时，必须与变换属性一起使用。

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

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

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

Answer 4

transform-style:preserve-3d 表示 "the children of the element should be positioned in the (same) 3D-space"。这意味着如果您对它们应用 3d 变换，它们将被相应地渲染。

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

所以你要么特别给它一个更大的z-index，要么你改变他们的位置。

要了解更多此行为，请玩 rotateY。考虑到 3d 中的旋转角度 space.

，您会注意到在其他值下只有一半元素是可见的，那是离您较近的一半

在 90 和 270 度时它是不可见的，因为它是垂直的（并且没有宽度）并且在 180 时它是 "completely" 在 3d space 中旋转，这意味着它在另一个具有相同 z-index 值的元素后面并且（技术上）"behind" 它。

另一个 "fix" 是从父元素中删除 preserve-3d，（或将其移至子元素，如 I.Johnson 建议的那样），因此 2 个元素各自呈现space，并且 space 的每个表示将根据它们在堆叠上下文中各自的元素位置进行堆叠。

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

Element rotated 180 degrees ends up behind other elements

css

css-transforms