调整旋转对象的大小后如何更新左上角的位置？

Question

我有一个可以通过它的 4 个边中的任何一个以及它的 4 个角中的任何一个来调整大小的对象。

现在我正在尝试使其可旋转，并且我正在使用 CSS 属性 translate: rotate(angle) 这样做，并且锚点是对象的中心。

对象具有顶部、左侧、宽度、高度和角度的属性。

问题是，一旦它旋转，如果我需要从右下角调整它的大小，它不会保持左上角的位置，同时仍然保持中心锚点。

我需要找到一种方法来通过更新它来保持左上角的位置，可能使用一些三角函数。

document.getElementById("button").addEventListener("click", function() {
  var obj = document.getElementById("object");

  console.log(obj.style.top, obj.style.left); // 100, 100

  obj.style.width = "200px";
  obj.style.height = "200px";

  // Something needs to be done here to update the top left position and keep it in place

});

div {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 50px;
  height: 50px;
  background: red;
  transform-origin: 50% 50%;
  transform: rotate(20deg);
}

<div id="object"></div>
<button id="button">Resize bottom-right corner</button>

我有一个小提琴here

Answer 1

我假设您正在尝试使其保持原位，因此只需添加：

obj.style.left = "25px";
obj.style.top = "25px";

设置高度和宽度后。 为了得到这个位置，我看到你让它的大小从 50 像素增加到 200 像素（增加了 4 倍），所以我把它变成了原始 x/y 的四分之一，把它放在“相同”的位置。

希望这会有所帮助！ (codepen:http://codepen.io/JohnJ1101/pen/wJpJqE)