is there a way to translate from coordinates of one SVG to another when they have different transforms

I've got a div containing two SVG's that are displayed one on top of the other:

<div class="container" id="container">
  <svg class="one" id="one" height="6000" width="6000">
    ...
  </svg>

  <svg class="two" id="two" height="6000" width="6000">
    ...
  </svg>
</div>

with CSS:

.container {
  perspective: 2600px;
  width: 6000px;
  overflow: hidden;
  margin-top: -4000px;
  display: grid;
}

.container .one {
  transform: rotateX(120deg);
  margin-bottom: -200px;
  transform-origin: bottom;
  grid-area: 1 / 1;
  z-index: 0;
}

.container .two {
  margin-bottom: -200px;
  transform-origin: bottom;
  grid-area: 1 / 1;
  z-index: 1;
}

Is there any way to take coordinates on the "one" scale and convert them to the "two" scale?

I have attempted to create an SVG point and set it's x/y to a "one" coordinate and then go to screen coordinates and then back to "two" coordinates via

let point = one.createSVGPoint();

point.x = 3000;
point.y = 5268;

// SVGToScreen
point = point.matrixTransform(one.getScreenCTM());

// ScreenToSVG
point = point.matrixTransform(two.getScreenCTM().inverse());

but the resulting point is not drawn at the correct spot when added to "two".