为什么透视不适用于容器的儿童?
问题描述:
我正在制作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不应该创建新的堆叠上下文。
答
的包装的div(.floor)需要:
transform-style: preserve-3d;
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style
我不udnerstand以及你有什么想法,但如果你想一些CSS是应用于一个元素和她的“儿子”,你可以这样写:.map,.map> * {property:value; } 我甚至不知道我是否解释得好。希望能帮助到你! – JoelBonetR
嗨Joël,感谢您的提示,但正如您所看到的,透视属性是由孩子们继承的。由于由包装器引入的堆叠上下文,这看起来不过。我编辑了我的问题,我希望现在更清楚。 – kslstn
请问您,请在您的帖子中详细说明哪个元素必须采用哪些属性,而不是?它可以简化我很多很多的检查,因为我可以达到你的行为有关css + js工作流的原因。 Thx – JoelBonetR