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继承属性。

以下是问题的代码：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

为什么透视不适用于容器的子项？

1 个答案: