如果父元素有自己的转换，为什么 CSS translateZ 会被忽略？

问题描述

谁能解释这种行为？

我有三个嵌套元素：容器 div、子容器 div 和“形状/图像”div。标记如下：

<html>
  <div class="container">
    <div class="subcontainer">
      <div class="shape"></div>
    </div>
  </div>
</html>

当我将 transform: translateZ() 应用到形状时，显然只有在其中一位父母应用了一些 perspective 时它才会起作用。它不一定是直接父级，它可以是父级的父级 div（容器）。当容器具有 perspective 时，形状会在 z 方向精细移动。但是，当子容器（父容器）在 transform 中包含除 unset 之外的内容时，形状中的 translateZ() 将被完全忽略。当然，将 perspective 应用于直接父级会使形状中的 translateZ() 起作用，但我想了解父级 transform 中的内容阻止了 perspective形状：

以下作品：

.container{
  perspective: 1000px;
}

.subcontainer{
  transform: unset;     // <- or if this is not present at all
}

.shape{
  transform: translateZ(300px);
}

以下不起作用：

.container{
  perspective: 1000px;
}

.subcontainer{
  transform: scale(1.001);
}

.shape{
  transform: translateZ(300px);    // <- this is fully ignored
}

这是 codepen 中的 this example。

编辑：在许多文档中，我读到 perspective 必须是在父元素中设置的属性。但是 MDN 似乎表明它实际上可以在预期元素本身中设置，在 transform 规则内。那么，父级中的 perspective: 500px 是否等同于子级中的 transform: perspective(500px)？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-transforms html perspective