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