如何固定容器右下角位置并实现向左上方缩放？

嘿，这个需求其实核心是搞定缩放时的位置补偿——因为默认的transform缩放是以元素中心为原点的，直接缩会让整个元素往中间跑，咱们得手动算偏移量，把右下角「钉」在原来的位置上。下面给你完整的实现方案，还有关键逻辑的拆解：

实现思路 #

要让红色容器的右下角固定不动，向左上方缩放，我们需要：

• 先对元素应用缩放变换
• 计算并应用一个反向的偏移量，抵消缩放带来的右下角位移
  • 当缩放比例为scaleVal时，元素的宽度变为initWidth * scaleVal，高度变为initHeight * scaleVal
  • 为了保持右下角位置不变，需要让元素向左移动initWidth - (initWidth * scaleVal)，向上移动initHeight - (initHeight * scaleVal)

完整代码实现 #

HTML 结构 #

<div id="app">
  <div class="box"></div>
  <div class="box" id="box"></div>
</div>

CSS 样式 #

* { box-sizing: border-box; }
.box {
  height: 200px;
  width: 200px;
  background-color: black;
  position: absolute;
}
.box:nth-child(2) {
  background-color: red;
}

JavaScript 逻辑 #

const box = document.getElementById("box")
const initHeight = 200
const initWidth = 200
const centerX = initWidth / 2
const centerY = initHeight / 2

// 封装transform变换函数，处理缩放和偏移
function transform(scale, translate) {
  if (translate) {
    // 调整偏移量的计算基准，适配transform的原点逻辑
    translate[0] = -centerX + translate[0]
    translate[1] = -centerY + translate[1]
  }
  box.style.transform = `scale(${scale})${
    translate ? ` translate(${translate.map((x) => x + "px").toString()})` : ""
  }`
}

// 初始右下角位置（对应黑色容器的右下角坐标）
let initX = initWidth
let initY = initHeight
let scaleVal = 0.5
// 初始渲染
transform(scaleVal, [initX, initY])

// 逐步缩放的动画函数
function scale() {
  scaleVal = scaleVal + 0.01
  // 计算偏移量：让右下角保持固定
  transform(scaleVal, [
    initX - scaleVal * initWidth,
    initY - scaleVal * initHeight
  ])
  // 缩放至1倍时停止动画
  if (scaleVal <= 1) {
    setTimeout(() => {
      requestAnimationFrame(scale)
    }, 50)
  }
}

// 启动缩放动画
scale()

关键逻辑拆解 #

1. transform函数：这里我们调整了偏移量的计算基准，因为transform的translate是基于元素变换后的原点（默认是中心）来计算的，所以要先把偏移量转换为以元素中心为基准的数值。
2. 偏移量计算：initX - scaleVal * initWidth和initY - scaleVal * initHeight这两个值，本质上是计算缩放后元素右下角相对于初始位置的位移，然后通过反向偏移把它拉回原来的固定点。
3. 动画控制：用requestAnimationFrame配合setTimeout实现平滑的逐步缩放，直到缩放比例回到1倍时停止。

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