我正在尝试使用 vanilla js 调整旋转（用 css 转换）对象的大小。对象原点位于中心且无法更改。
我发现了一个功能here https://stackoverflow.com/questions/25985630/changing-width-height-moves-rotated-element应该可以做到这一点，但是它看起来仍然不理想 - 左上角改变了它的位置（像素的一半左右）。
这是一个简化的代码笔示例 https://codepen.io/vdenisenko-waverley/pen/BayWORo?editors=1010.
我需要进行哪些代码修改getCorrection保持左上角位置始终相同？
UPDATE:
根据下面的评论，计算是准确的，但浏览器无法完美地处理像素的分数，这似乎是技术限制？有什么想法如何修复吗？
如果您应用相对于左上角的变换（transform-origin: top left），那么您不需要计算该校正因子。如果需要将所有形状放置在页面上，您可以将它们包裹起来：
const obj = document.querySelector('.object');
const btn = document.querySelector('button');
let h = 100;
let w = 100;
btn.addEventListener('click', () => {
h += 5;
w += 5;
updateElement();
});
function updateElement() {
obj.style.width = w + 'px';
obj.style.height = h + 'px';
}
updateElement();
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow-y: scroll;
overflow-x: hidden;
}
button {
margin: 8px;
padding: 8px;
font-family: monospace;
border: 2px solid black;
background: transparent;
}
.container {
position: relative;
width: 100%;
height: 100%;
}
.object-initial {
position: absolute;
top: 16px;
left: 30%;
outline: 1px dashed black;
transform: rotate(20deg);
transform-origin: top left;
width: 100px;
height: 100px;
}
.object {
position: absolute;
top: 16px;
left: 30%;
outline: 1px solid black;
transform: rotate(20deg);
transform-origin: top left;
}
<button>Increase width and height</button>
<div class="container">
<div class="object"></div>
<div class="object-initial"></div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
