如何根据变换要求切换变换原点？

Question

我的div位置绝对正确。我想动态更改其宽度并应用旋转变换。

旋转时，我希望变换原点为

transform-origin: center

更改宽度时，我希望转换原点为

transform-origin: top left

我的问题是当我动态更改转换原点时，div跳转的位置。

有没有一种方法可以防止元素跳出位置？

let box = document.getElementById('box')
let width = document.getElementById('width')
let rotate = document.getElementById('rotate')

box.style.width = width.value + "px"; 

rotate.oninput = function() {
  box.style.transform = `rotate(${rotate.value}deg)`; 
}

width.oninput = function() {
    box.style.width = width.value + "px";  
}

width.addEventListener("mousedown", e => {
  box.style.transformOrigin = "top left"
})

rotate.addEventListener("mousedown", e => {
  box.style.transformOrigin = "center"
})

#box {
  top: 200px;
  left: 100px;
  position: absolute;
  height: 100px;
  border: 1px solid black;
  transform-origin: 0 0;
}

<div class="slidecontainer">
  width : <input type="range" min="10" max="300" value="50" class="slider" id="width">
</div>
  
<div class="slidecontainer">
  rotate: <input type="range" min="0" max="360" value="0" class="slider" id="rotate">
</div>
  
<div id="box"></div>