为什么透视没有应用到容器的children？

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>

从 parent 和从 individual 自己的堆栈上下文获取视角的区别在这个代码笔上得到了演示：https://codepen.io/HugoGiraudel/pen/JImvb

我的示例中的包装器 (div.floor) 似乎引入了新的堆叠上下文，从而为 div 中的每个楼层创建了相同的视角。这使得每个 .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 有 position: relative，但没有自己的 z-index。 According to MDN 不应创建新的堆栈上下文。

Answer 1

包装 div (.floor) 需要：

  transform-style: preserve-3d;

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

为什么透视没有应用到容器的children？

Why is perspective not applied to the children of the container?

css

css-transforms