使用变换缩放：矩阵（）：如何坚持左边缘（改变缩放中心）？ [复制]答案

【问题标题】：Zoom with transform:matrix(): how to stick to the left edge (alter zoom center)? [duplicate]使用变换缩放：矩阵（）：如何坚持左边缘（改变缩放中心）？ [复制]
【发布时间】：2020-03-12 15:09:47
【问题描述】：

我的客户想要具有缩放功能（我发现这很容易用transform: scale() 实现，但之后他希望节点的左上边缘位于同一位置。遗憾的是在学校而不是数学我玩过魔兽争霸3和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>

【问题讨论】：

标签： javascript css math css-transforms css-calc

【解决方案1】：

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

原产地：

这里以原点设置为 30px 30px 为例：

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>

【讨论】：