调整带平移旋转属性的元素大小时如何计算top、left偏移量

问题根因 #

你当前的transform写法中，translate()控制的是元素左上角的坐标，而旋转锚点默认是元素中心。修改宽高后，元素中心相对于左上角的偏移量发生变化，相同translate值下实际元素的视觉位置就会出现偏移。

推荐解法（无需三角函数，逻辑极简） #

直接将定位逻辑从「定位左上角」改为「定位元素中心」，调整transform的写法如下：

/* cx是元素中心横坐标，cy是元素中心纵坐标，deg是旋转角度 */
transform: translate(cx, cy) rotate(deg) translate(-50%, -50%);

这种写法的优势：

• 始终以元素中心为锚点旋转，完全符合你的需求
• 修改宽高时不需要调整cx、cy的值，元素中心位置固定，不会出现偏移
• 无需额外的三角函数计算，性能更高，逻辑更好维护

你提供的示例修改后可以直接对齐，代码如下：

<html>
  <head>
    <style>
        body {
            position: relative;
        }
        .thing {
            position:absolute;
            border: solid 1px #0f0;
            /* 中心固定在(150px, 125px)位置 */
            transform: translate(150px, 125px) rotate(-30deg) translate(-50%, -50%);
        }
        .thing2 {
            position:absolute;
            border: solid 1px #f00;
            /* 和上面同一个中心坐标，宽高变化也不会偏移 */
            transform: translate(150px, 125px) rotate(-30deg) translate(-50%, -50%);
        }
    </style>
  </head>
  <body>
    <div class="thing" style="width:100px;height:50px;"></div>
    <div class="thing2" style="width:150px;height:50px;"></div>
  </body>
</html>

兼容原有逻辑的三角函数解法 #

如果你不想修改现有左上角定位的存储逻辑，可以通过三角函数计算偏移补偿量，调整translate的坐标：

已知参数 #

• 原有左上角坐标：(x, y)（即原来translate的参数）
• 原有宽高：w0、h0
• 新宽高：w1、h1
• 旋转角度：θ（需转换为弧度，JS中可通过deg * Math.PI / 180转换）

计算公式 #

const deltaW = w1 - w0
const deltaH = h1 - h0
const cosθ = Math.cos(θ)
const sinθ = Math.sin(θ)
// 计算需要补偿的偏移量
const deltaX = (deltaW / 2) * cosθ - (deltaH / 2) * sinθ
const deltaY = (deltaW / 2) * sinθ + (deltaH / 2) * cosθ
// 新的translate坐标
const newX = x - deltaX
const newY = y - deltaY

将新的newX、newY代入translate参数即可抵消宽高变化带来的偏移。

内容的提问来源于stack exchange，提问作者jtalarico