Maintain single CSS perspective-origin for entire page

Question

Is there a way to set perspective-origin to a single point for an entire page?

When the docs say perspectives for child elements, they apparently mean direct child elements only.

So if we want a page full of transformed elements to have the same perspective, we either have to have all those elements as direct children of one element, or do some manual math for every element to match up the origin - and the origin is relative to the elements bounds. That's impractical if you have moving, interactive elements, I really hope I'm just wrong about something. In my head this should work exactly like position.

.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>