如果父元素具有其自身的转换，为什么忽略CSS translateZ? [英] Why CSS translateZ is ignored if parent element has a transform of its own?
问题描述
任何人都可以解释这种行为吗?
Can anyone explain this behavior?
我有三个嵌套元素:一个容器 div ，一个子容器 div 和一个"shape/image" div .标记如下:
I have three nested elements: a container div, a subcontainer div and a "shape/image" div. The markup is like below:
<html>
<div class="container">
<div class="subcontainer">
<div class="shape"></div>
</div>
</div>
</html>
当我对形状应用 transform:translateZ()时，显然只有在父母之一应用了某些 perspective 的情况下，该方法才有效.它不必一定是直接父级，它可以是父级的父级 div (容器).当容器具有 perspective 时，形状将沿z方向精细移动.但是，当子容器(父容器)在 unset 之外的其他内容时，形状中的 translateZ()会被完全忽略.当然，对直接父级应用 perspective 可以使形状中的 translateZ()起作用，但是我想了解父级 transform 中的内容阻止透视图可以通过以下形状看到:
When I apply transform: translateZ() to the shape, obviously it will only work if one of the parents has some perspective applied. It doesn't need to be necessarily the direct parent, it can be the parent's parent div (the container). When the container has the perspective, the shape moves in the z direction fine. But, when the subcontainer (the parent) has something in the transform, other than unset, the translateZ() from the shape is fully ignored. Of course, applying perspective to the direct parent makes the translateZ() in the shape work, but I wanted to understand what in the parent transform blocks the perspective to be seen by the shape:
以下作品:
.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
}
这里是
在许多文档中，我读到 perspective 必须是在父元素中设置的属性.但是 MDN 似乎表明实际上，它可以在 transform 规则内的预期元素本身中设置.那么，父级的 perspective:500px 等同于子级的 transform:Perspective(500px)吗?
In many docs I read that perspective must be a property set in the parent element. But MDN seems to show that it can in fact be set in the intended element itself, inside the transform rule. So, is perspective: 500px in the parent equivalent to transform: perspective(500px) in the child?
