Почему перспектива не применяется к дочерним элементам контейнера?

Question

Я делаю 3D план этажа с 4 этажами и хочу применить одну и ту же перспективу ко всем этажам. Это оказывается проблемой.

По несвязанным причинам я должен поместить обертки в 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>

Разница между получением перспективы от родителя и из собственного стекового контекста человека демонстрируется на этом коде ручки: https://codepen.io/HugoGiraudel/pen/JImvb

Кажется, что обертки (div.floor) в моем примере вводят новые контексты стекирования, создавая перспективу для каждого этажа индивидуально. Это делает.plan div внутри каждого.floor div, чтобы получить перспективу с собственным набором линий перспективы. Мне нужны все div.plan, чтобы получить ту же перспективу, а не просто наследовать свойство от.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-индекса. Согласно MDN, это не должно создавать новый контекст стека.

Answer 1

Div-обертки (.floor) нужно:

  transform-style: preserve-3d;

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