维护整个页面的单一CSS透视原点

Question

有没有办法将整个页面的透视原点设置为一个点？

当文档提到子元素的透视图时，它们显然只是指直接的子元素。

因此，如果我们希望一个充满转换元素的页面具有相同的视角，我们要么必须将所有这些元素作为一个元素的直接子元素，要么对每个元素进行一些手工计算，以匹配原点-原点是相对于元素边界的。如果你有移动的、互动的元素，这是不切实际的，我真的希望我只是错了。在我看来，这应该和我的位置完全一样。

.main{
background:rgba(0,0,0,0.1);
height: 400px;
width: 400px;
position: relative;
perspective-origin: left bottom;
perspective: 100px;
}
.plane1{
background: red;
height: 100px;
width: 100px;
position: absolute;
top: 50px;
left: 50px;
transform: rotateX(15deg) rotateY(20deg);
}
.plane2{
background: blue;
height: 100px;
width: 100px;
position: absolute;
right: 50px;
bottom: 50px;
transform: rotateX(15deg) rotateY(20deg);
}

<div class="main">
<div>
<div>
<div class="plane1"></div>
</div>
</div>
<div>
<div>
<div class="plane2"></div>
</div>
</div>  
</div>

Answer 1

Temani Afif在线程中的答案是正确的-必须为透视声明和要接受该透视的元素之间的每个子体设置transform-style: preserve-3d。如MDN链路所示：

'由于此属性未继承，因此必须为所有非叶设置元素的后代。'

html, body {
width: 500px;
height: 300px;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
overflow-x:hidden;
overflow-y:auto;
perspective: 100px;
perspective-origin: left;
}
.main {
background: rgba(0,0,0,0.1);
height: 500px;
}
* {
transform-style: preserve-3d;
}
.plane1{
background: red;
height: 100px;
width: 100px;
position: absolute;
top: 150px;
left: 50px;
transform: rotateX(15deg) rotateY(20deg);
}
.plane2{
background: blue;
height: 100px;
width: 100px;
position: absolute;
top: 200px;
left: 200px;
transform: rotateX(5deg) rotateY(10deg);
}

<div class="main">
<div>
<div>
<div class="plane1"></div>
</div>
</div>
<div>
<div>
<div class="plane2"></div>
</div>
</div>  
</div>