为什么透视不适用于容器的儿童？

• Z时代
• 2024-01-10
• 分类：问答

我正在制作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具有位置：相对的，但没有自己的Z-指数。 According to MDN不应该创建新的堆叠上下文。

回答：

transform-style: preserve-3d;

以上是 为什么透视不适用于容器的儿童？ 的全部内容， 来源链接： utcz.com/qa/264223.html