为什么使用1/a公式无法撤销transform:scale()缩放效果？

你的代码不生效有两个核心原因：

• 最根本的原因是CSS的transform属性赋值是全量覆盖逻辑，不是叠加逻辑。你第二次给transform赋值scale(0.33)时，之前设置的scale(3)会被直接替换掉，此时缩放的基准是元素未添加任何transform的原始尺寸，而非放大3倍后的尺寸。相当于你直接把元素缩到了原始尺寸的33%，完全不是你预期的“在3倍基础上反向缩放1/3”。
• 就算你通过逻辑实现了缩放值的连续累加，你写死的0.33只是1/3的近似值，数学计算上3 * 0.33 = 0.99 ≠ 1，多次操作后会累积精度误差，也无法精确回到原始尺寸。

方案1：直接还原（最稳妥） #

如果你的需求就是缩放后回到原始状态，不需要保留中间缩放层级，直接在还原时设置scale(1)即可，没有任何精度问题：

function scale_up() {
  document.getElementById("div").style.transform = "scale(3)";
}

function scale_down() {
  // 直接设置缩放比例为1，回到原始尺寸
  document.getElementById("div").style.transform = "scale(1)";
}

setTimeout(scale_up, 3000)
setTimeout(scale_down, 6000)

方案2：变量维护缩放比例（适合连续缩放场景） #

如果你需要实现连续累加的缩放逻辑（比如点击按钮逐次放大/缩小），单独用变量存储当前的缩放值，每次修改变量后再重新生成transform属性，不要手写近似小数值：

const div = document.getElementById("div");
// 初始化缩放比例为1（原始尺寸）
let currentScale = 1;

function scale_up() {
  currentScale *= 3;
  div.style.transform = `scale(${currentScale})`;
}

function scale_down() {
  // 直接用除法计算逆缩放值，不要手写0.33这类近似值
  currentScale /= 3;
  div.style.transform = `scale(${currentScale})`;
}

setTimeout(scale_up, 3000)
setTimeout(scale_down, 6000)

配套的基础样式和结构如下：

#div {
  height: 30px;
  width: 30px;
  border-style: solid;
}

<body>
  <div id="div"></div>
</body>

如果需要做更复杂的多段transform组合（比如同时旋转、位移、缩放），不建议单独维护单个缩放值，可以通过DOMMatrix接口解析当前的变换矩阵做计算，避免手动维护多个值出错。

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