更改CSS translate3d() X/tx位置

Question

如何将CSS tx的位置从translate3d(tx, ty, tz)更改？transform translate属性来自JavaScript。我不想换别的财产。我只需要改变tx的位置。

CSS代码：transform: translate3d(93px, -185px, 0)或transform: translate3d(58px, -130px, 0)。它应该替换为transform: translate3d(0, -185px, 0)或transform: translate3d(0, -130px, 0)。

Answer 1

您应该以以下方式维护ty tz的值​​：

   const getTransform = el => {
      var transform = window.getComputedStyle(el, null).getPropertyValue('-webkit-transform');
      var results = transform.match(/matrix(?:(3d)\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))(?:, (-{0,1}\d+)), -{0,1}\d+\)|\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))\))/);
    
  if (!results) return [0, 0, 0];
  if (results[1] == '3d') return results.slice(2, 5);

  results.push(0);
  return results.slice(5, 8);
}

document.querySelector(".button").addEventListener("click", () => { // some event
const myEl = document.querySelector(".myElement"); //element to change transform tx
  const [x, y, z] = getTransform(myEl);
  myEl.style.transform = `translate3d(0, ${y}, ${z})`; // change to 0 only tx
});