使用transform：matrix（）缩放：如何坚持到左边缘（改变缩放中心）？

2024-05-06 • 问答

我的客户希望具有缩放功能（我发现使用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),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>

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); }

使用transform：matrix（）缩放：如何坚持到左边缘（改变缩放中心）？

qwertyu1212121 回答：使用transform：matrix（）缩放：如何坚持到左边缘（改变缩放中心）？

大家都在问