如何将ins元素从右往左微调1px？单次移动12px问题排查

你遇到的问题核心是transform和left属性的叠加影响：

• 初始时你用left:50% + transform:translateX(-50%)实现居中，这时候元素的实际位置是父容器中点，但jQuery的position().left获取的是经过transform变换后的最终偏移量（不是CSS里设置的50%对应的像素值）。
• 当你第一次执行ins.css('left', x + 'px')时，x是这个变换后的left值减1，此时元素的left被设为该像素值，同时transform:translateX(-50%)依然生效——相当于元素先被定位到x像素位置，再向左偏移自身宽度的50%（也就是12.5px，视觉上近似12px），所以每次点击实际移动的距离是1px + 12.5px，看起来就是12px左右。

有两种靠谱的修复方式：

方式一：改用margin-left实现居中（推荐） #

把transform去掉，用负margin实现居中，这样left值就是实际的定位值，修改时不会有叠加：

.wrap{background:lightblue; display:inline-block; width:50%; position:relative; height:54px;}
.ins{background:orange; position:absolute; width:25px; height:25px; left:50%; margin-left: -12.5px;} /* 替换transform为负margin */

JS代码不需要改，此时每次点击都会准确左移1px。

方式二：用transform控制偏移，不修改left #

如果想保留transform的居中方式，可以通过修改transform的偏移量来实现移动，而不是修改left：

$('button').on('click', function(){
  var ins = $('#ins');
  // 获取当前transform的X偏移值，初始是-50%，每次减1px
  let currentTransform = ins.css('transform');
  // 解析transform矩阵，提取X偏移（针对2D变换）
  let translateX = currentTransform === 'none' ? 0 : parseFloat(currentTransform.split(',')[4]) - 1;
  ins.css('transform', `translateX(${translateX}px)`);
});

CSS保持初始的left:50%; transform:translateX(-50%);即可，这样每次点击都会在原有基础上左移1px。

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