왜 컨테이너의 하위 항목에 퍼스펙티브가 적용되지 않습니까?

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가 필요하며 맵에서 속성을 상속받는 것이 아닙니다. .floor 위치가,

.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; 
} 

당신이 볼 수 있듯이 : 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