コンテナの子にパースペクティブが適用されないのはなぜですか？

Question

私は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からプロパティを継承するのではありません。ここで

が問題とコードです：あなたが見ることができるように

.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ポジションがあります：https://codepen.io/kslstn/pen/OzMQjO

関連SCSSラインが（と思う）している相対的な、ない独自のzをインデックス。 According to MDN新しいスタッキングコンテキストを作成すべきではありません。

Answer 1

ラッパーのdiv（.floor）必要性：

transform-style: preserve-3d;

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style