3D CSS3 меняет обработку преобразований с помощью проблемы DOMMatrix

// capture our "starting offset":
const [tx=0, ty=0, tz=0] = getComputedStyle(plane)[`transform-origin`]
  .split(` `)
  .map(parseFloat);

function redraw() {
  a = angle.value;
  label.textContent = a;
  // Set up a transform...
  const transform = `
    perspective(250px)
    rotateX(${2*a  }deg)
    rotateY(${  a/3}deg)
    rotateZ(${  a}deg)
  `;

  // And get the matrix equivalent.
  const M = new DOMMatrix(transform);

  // Apply the transform to our plane...
  plane.style.transform = transform;
  
  // Draw all four corner points
  document.querySelectorAll(`.point`).forEach(p => p.remove());
  [[-tx, -ty], [-tx,ty], [tx,ty], [tx,-ty]].forEach(coords => {
    // First, transform the 2D corner point into a 4D homogeneous coordinate:
    const { x, y, z, w } = M.transformPoint(new DOMPoint(...coords, -tz));

    // then create a div that we're going to place at the
    // corner point's projected location:
    const p = document.createElement(`div`);
    p.classList.add(`point`);
    content.appendChild(p);

    // x and y (as well as z but we won't use that) are
    // still homogeneous values, so we need to perform a
    // homogeneous divide to turn them into "real" x and y,
    // and we also need to remember to compensate for
    // the fact that (0,0) is actually at (tx, ty).
    const { style } = p;
    style.setProperty(`--x`, `${x/w + tx}px`);
    style.setProperty(`--y`, `${y/w + ty}px`);
  });
}

angle.addEventListener(`input`, () => redraw());
redraw();

body {
  padding: 2em;
  padding-left: 4em;
  div:has(#slider) {
    margin-bottom: 2em;
    #slider {
      position: relative;
      margin-right: 14em;
      #angle {
        position: absolute;
        width: 15em;
      }
      label[for = "angle"] {
        position: absolute;
        top: 1.5em;
        left: 7em;
      }
    }
  }
  #content {
    position: relative;
    width: 200px;
    height: 200px;
    background: yellow;
    #plane {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .point {
      position: absolute;
      --x: 0px;
      --y: 0px;
      top: calc(var(--y) - 3px);
      left: calc(var(--x) - 3px);
      width: 6px;
      height: 6px;
      background-color: black;
      border-radius: 50%;
    }
  }
}

<div>
  0 degrees
  <span id = "slider">
      <label id = "label" for = "angle">0</label>
      <input id = "angle" type = "range" min = "0" max = "360" step = "0.1" value = "25">
    </span> 360 degrees
</div>

<div id = "content">
  <div id = "plane"></div>
</div>