Zoom with transform:matrix(): how to stick to the left edge (alter zoom center)?

Question

My client wants to have zoom functionality (I found that this is easy to implement with transform: scale() but after that he wants to have the top-left edge of a node at the same position. Sadly in school instead of math I played to WarCraft III and Space Rangers (iconic Russian game, try it), so now I do not know what kind of formula I need :(

One zoom position:

Another zoom position: as you see at the left we have empty "margin":

Minimum reproducible example is here:

const p = document.querySelector('p');
for (let i = 0; i < 50; i++) {
    p.innerText += ' ' +  Math.random() + Math.random();
}

document.querySelector('input').onchange = event => {           
    p.style.setProperty('--zoom', event.target.value);
}

input {
    z-index: 1;
    position: absolute;
}


p {

    transform: matrix(
        calc(var(--zoom) / 100),
        0,
        0,
        calc(var(--zoom) / 100),

        /* Next two lines is not perfect, what I need to write here? */
        calc(var(--zoom) * var(--zoom) / 65 - 140),
        calc(var(--zoom) * var(--zoom) / 1000)
    );
}

<input type='range' min='10' max='200'></input>

<p></p>

Answer 1

Simple: alter origin with transform-origin: 0 0;

Original origin:

Here for example origin set at 30px 30px:

Read more https://dev.opera.com/articles/understanding-the-css-transforms-matrix/#coordinates

const p = document.querySelector('p');
for (let i = 0; i < 50; i++) {
    p.innerText += ' ' +  Math.random() + Math.random();
}

document.querySelector('input').onchange = event => {           
    p.style.setProperty('--zoom', event.target.value);
}

input {
    z-index: 1;
    position: absolute;
}


p {
    transform-origin: 0 0;
    transform: matrix(
        calc(var(--zoom) / 100),
        0,
        0,
        calc(var(--zoom) / 100),
        0,
        0
    );
}

<input type='range' min='10' max='200'></input>

<p></p>