本文介绍一种在元素旋转后仍能保持非操作边位置不变的缩放方案，核心是通过容器布局隔离变换影响，并修正 transform-origin 与缩放逻辑。
当一个 <div> 被旋转（如 transform: rotate(30deg)）后，其坐标系已发生倾斜，此时直接修改 top/left/width/height 等 CSS 属性会导致视觉定位错乱——例如拖拽北侧（.handle-n）手柄时，顶部收缩本应仅改变高度并上移自身，但因旋转导致 top 偏移量在页面坐标系中不再垂直生效，反而牵连左右边界位移。
原代码的问题在于：在旋转状态下，仍试图用直角坐标系的 top/left 值去补偿缩放引起的位移。这在 rotate(0deg) 时成立，但一旦存在旋转角度，offsetTop/offsetLeft 返回的是渲染后的布局位置（已受 transform 影响），而后续 style.top = ... 的赋值又是在原始坐标系中叠加，造成双重变换冲突。
✅ 正确解法分三步：
移除所有 top/left 动态调整逻辑
如答案所示，删除 handle-n 和 handle-w 分支中对 style.top 和 style.left 的赋值。因为旋转后，靠 top/left 维持锚点已不可靠；应改由 CSS 布局机制保证“不动边”的稳定性。引入包裹容器 + Flex 居中布局
使用 .container 作为绝对定位容器，并设置 display: flex; justify-content: center; align-items: center，使 #resizable-div 的定位基准脱离文档流干扰。同时将 #resizable-div 的 position: absolute 保留在容器内，确保其 transform（含旋转）以容器为上下文生效。-
显式声明 transform-origin
在 CSS 中添加：#resizable-div { transform-origin: top left; /* 关键！统一变换原点 */ }这确保所有 rotate() 和后续可能的 scale() 操作都围绕左上角进行，使缩放时右/下边缘自然延展，而左/上边缘“钉住”不动——这正是 handle-e/handle-s 缩放时期望的行为；同理，若需 handle-n 缩放时底边固定，可设 transform-origin: bottom left 并配合 height + top 调整（但本方案选择更稳健的容器锚定法）。
? 补充建议（增强鲁棒性）：
- 防止缩放至负尺寸：在 mousemove 中加入校验：
const newWidth = Math.max(20, currentHandle.classList.contains('handle-e') ? originalWidth + deltaX : originalWidth - deltaX); resizableDiv.style.width = newWidth + 'px'; - 旋转手柄优化：当前 Math.atan2(deltaY, deltaX) 计算角度未考虑初始旋转状态，应累加而非重置：
// 初始化时读取 currentDeg = getComputedStyle(resizableDiv).transform; // 解析矩阵获取当前角度（可用 DOMMatrix API）
- 手柄跟随旋转：为 .handle 添加 transform: rotate(calc(-1 * var(--rotation))); 并通过 CSS 变量同步主元素角度，避免手柄歪斜影响交互体验。
最终，该方案摒弃了在旋转态下强行用 top/left 补偿的脆弱逻辑，转而利用 CSS 布局层（Flex 容器）和变换原点（transform-origin）协同控制锚点，实现真正“单边缩放、他边岿然不动”的专业级交互效果。
