3D CSS3 transforms handling with DOMMatrix issue

// 2D working transforms --->
//const selfTransform = 'rotate(25deg) skewY(50deg) scale(0.6)';
// const selfTransform = 'rotate(45deg) skewX(50deg) scale(0.6)';
// <---

// 3D not working transforms --->
const selfTransform = 'perspective(500px) rotateX(60deg) rotateY(15deg)';
// <---

const DOM_a = document.getElementById('a');
DOM_a.style.transform = selfTransform;

// Generate the transform string
const transform = 
  // Translate to #a 0, 0
  'translate3d(100px, 100px, 0px) '
  // Translate to #a center, center
  + 'translate3d(100px, 100px, 0px) '
  // Apply #a transform
  + selfTransform
  // Translate back to #a 0, 0
  + 'translate3d(-100px, -100px, 0px)';

// Create the 3d projective transform matrix
const tm = new DOMMatrix(transform);

// Create the point representing the #a bottom left point coords in #A landmark
const blCoordsInA = new DOMPoint(
  0,
  200
);

// Find the #a bottom left point coords in the window landmrk by applying the transform
const blCoordsInWindow = blCoordsInA.matrixTransform(tm);
console.log(blCoordsInWindow);

const blLeft = blCoordsInWindow.x;
const blTop = blCoordsInWindow.y;


// Visualize the point by moving the black circle
const DOM_marker = document.getElementById('marker');
DOM_marker.style.left = blLeft + 'px';
DOM_marker.style.top = blTop + 'px';

#a {
  position: absolute;
  top: 100px;
  left: 100px;
  
  width: 200px;
  height: 200px;
  
  background-color: red;
  transform-origin: center center;
}

#marker {
  position: absolute;
  top: 0px;
  left: 0px;
  
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -3px;
  
  background-color: black;
  border-radius: 50%;
}

<div id="a">
</div>

<div id="marker">
</div>