1
我正在制作4层楼的3D平面布置图，并且想要将同一视角应用于所有楼层。事实证明这是一个问题。为什么透视不适用于容器的儿童？
由于不相关的原因，我必须在包含实际平面图图像的div上放置包装。该结构是这样的：
<div class="map"> <!-- Has perspective applied -->
<div class="floor"> <!-- Wrapper that will not be transformed (to catch mouse events. Is repeated 4 times in the example on codepen -->
<div class="plan"> <!-- contains a floorplan and gets a 3D transformation. It should get the same perspective as div.map. -->
</div>
</div>
</div>从父和个体自身堆叠内容越来越观点表现出对这个codepen之间的区别：https://codepen.io/HugoGiraudel/pen/JImvb
看来，包装（div.floor）在我的示例中引入了新的堆叠上下文，为每个楼层单独创建透视图。这使得每个.floor div中的.plan div可以通过它自己的一组透视线获得透视。我需要所有.plan div来获得相同的视角，而不仅仅是从.map继承属性。
下面是这个问题的代码：https://codepen.io/kslstn/pen/OzMQjO
相关SCSS线（我认为）：
.map{
position: relative;
z-index: 1;
perspective: 90px;
}
.floor{
position: relative;
transition: padding ease-in 300ms;
&.active{
.plan{
transform: translateX(120px) translateY(-100px) rotateX(45deg) rotateY(0deg) rotateZ(20deg);
}
}
}
.plan{
transform: perspective(900px) translateX(120px) translateY(-100px) translateZ(0px) rotateX(60deg) rotateY(0deg) rotateZ(60deg);
transition: all ease-in 300ms;
}
}
.floor:nth-child(1) .plan{
z-index: 40;
}
.floor:nth-child(2) .plan{
z-index: 30;
}
.floor:nth-child(3) .plan{
z-index: 10;
}
.floor:nth-child(4) .plan{
z-index: 0;
}
正如你所看到的，.floor具有位置：相对的，但没有自己的Z-指数。 According to MDN不应该创建新的堆叠上下文。
我不udnerstand以及你有什么想法，但如果你想一些CSS是应用于一个元素和她的“儿子”，你可以这样写：.map，.map> * {property：value; } 我甚至不知道我是否解释得好。希望能帮助到你！ – JoelBonetR
嗨Joël，感谢您的提示，但正如您所看到的，透视属性是由孩子们继承的。由于由包装器引入的堆叠上下文，这看起来不过。我编辑了我的问题，我希望现在更清楚。 – kslstn
请问您，请在您的帖子中详细说明哪个元素必须采用哪些属性，而不是？它可以简化我很多很多的检查，因为我可以达到你的行为有关css + js工作流的原因。 Thx – JoelBonetR