[带有transform：matrix（）的缩放：如何坚持到左边缘（更改缩放中心）？ [重复]

Question

此问题已经在这里有了答案：

• How to scale from left to right only2个答案
• How to scale from right to left in CSS?2个答案

我的客户希望具有缩放功能（我发现使用transform: scale()可以轻松实现此功能，但之后他希望将节点的左上边缘放在同一位置。可悲的是，我在学校而不是玩数学到WarCraft III和Space Rangers（俄罗斯符号游戏，尝试一下），所以现在我不知道我需要哪种公式：（

一个缩放位置：

另一个缩放位置：如您在左侧看到的，我们有一个空白的“边距”：

最小可复制示例在这里：

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

简单：使用transform-origin: 0 0更改原点；