如何仅修改CSS中translate3d()的tx参数值？

以下几种方法可以帮你只修改translate3d的tx参数，同时保留ty和tz的现有值：

方法1：通过正则解析并重置transform值 #

如果不知道元素当前的ty、tz具体数值，可以用正则提取现有参数，再重新设置tx为0：

// 选中目标元素
const targetEl = document.querySelector('.your-element-class');
// 获取当前生效的transform样式
const currentTransform = window.getComputedStyle(targetEl).transform;

// 匹配translate3d的参数格式
const translateMatch = currentTransform.match(/translate3d\(([^,]+),\s*([^,]+),\s*([^)]+)\)/);

if (translateMatch) {
  // 提取原有的ty和tz值
  const [_, originalTx, originalTy, originalTz] = translateMatch;
  // 重新设置transform，tx改为0
  targetEl.style.transform = `translate3d(0, ${originalTy}, ${originalTz})`;
}

这个方法会自动适配你提到的translate3d(93px, -185px, 0)或translate3d(58px, -130px, 0)这类情况，最终都会变成translate3d(0, -185px, 0)或translate3d(0, -130px, 0)。

方法2：直接修改生成transform的JavaScript代码 #

如果能找到动态生成translate3d的JS逻辑，直接把tx的计算值改成0是最直接的方式。比如原来的代码可能是类似这样：

// 原代码（示例）
const tx = calculateTxValue(); // 这里生成了93px或58px
const ty = -185; // 或-130
element.style.transform = `translate3d(${tx}px, ${ty}px, 0)`;

直接把tx的值改成0即可：

const ty = -185; // 保留原有ty计算逻辑
element.style.transform = `translate3d(0px, ${ty}px, 0)`;

方法3：CSS覆盖（不推荐） #

如果元素的transform是通过外部CSS而非行内样式设置的，可以用更高优先级的CSS规则覆盖，但如果是JS生成的行内样式，这种方法需要加!important，容易引发样式冲突，所以仅作备选：

.your-element-class {
  transform: translate3d(0, var(--ty-value), var(--tz-value)) !important;
}

不过这种方式需要提前知道ty和tz的值并定义CSS变量，灵活性不如JS方法。

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