Javascript 更改变换值：平移（-13px，0px）比例（1，1）分别旋转（0deg）

我想让两个跨度像镜像一样工作，当我移动一秒钟时，必须朝相反的方向移动

第一跨

<span style="transform: translate(-13px, 0px) scale(1, 1) rotate(0deg);">
<img src="./ImageEditor Demo_files/ImageRight.png" style="width: 750px; height: 750px;">
</span>

当第一个跨距的css改变时触发，它改变了第二个跨距的css，与第一个跨距相同，但我希望它喜欢，如果第一个跨距的旋转角度是10度，那么第二个跨距的旋转角度应该是-10度，平移和缩放相同

请查看

您可以使用从转换字符串中提取所有数值，然后在反转/镜像后将其放回：

[mirror].style.transform=[source].style.transform.replace（/[-？\.？\d]+/g，函数（match）{return-1*Number（match）；}）；

• 此正则表达式模式（

  /…/g

  ）基本上查找所提供字符串中的所有（

  g

  ）数字（

  \d+

  ），并带有可选的减号（

  -？

  ）和/或小数点（

  \。？

  ）。
  有关此模式如何工作的详细说明，请参见
• 请参阅和，以了解

  替换
  功能的其余部分如何工作的信息

在下面的live snippet中，我还更改了一些其他内容，为了使您的代码更加灵活，我将在片段之后对这些更改进行评论：

document.getElementById（'transform'）.onclick=function（）{document.getElementsByClassName（'elem source'）[0]。style.transform=this.previousElementSibling.value；}；
/*仅用于演示*/
var elemmiror=新的突变观察者（功能（突变）{
突变。forEach（功能（突变）{
document.getElementsByClassName（mutation.target.className.replace（'source'，'mirror'））[0].style.transform=mutation.target.style.transform.replace（/[-？\.？\d]+/g，函数（match）{return-1*Number（match）；}）；
});
});
elemmiror.observe（document.getElementsByClassName（'elem source'）[0]，{attributes:true，attributeFilter:['style']}）
表单{宽度：100%；页边距底部：30px；}
表单span{font-weight:bold；}
表单输入{边距：0；框大小：边框框；}
表单输入[type=text]{宽度：calc（100%-50px）；字体系列：monospace；}
表单输入[类型=按钮]{宽度：50px；}
/*仅用于演示*/
埃伦先生{
浮动：左；
宽度：50%；
文本对齐：居中；
变换：平移（0px，0px）缩放（1,1）旋转（0deg）；
}
.elem img{宽度：79px；高度：79px；}

变换第一个，镜像第二个：

我用split解决了这个问题

var observer = new MutationObserver(function(mutations) {
  
  arrsplit = document.getElementsByTagName('span')[0].style.transform.split(/[\(,)px]+/);
  replace = arrsplit[7].replace('deg','')
  mirror= arrsplit[0]+"("+parseFloat(arrsplit[1])*-1+"px"+", "+parseFloat(arrsplit[2])*1+"px"+")"
  +arrsplit[3]+"("+parseFloat(arrsplit[4])*1+", "+parseFloat(arrsplit[5])*1+")"+
  arrsplit[6]+"("+parseFloat(replace)*-1+"deg"+")";

  mutations.forEach(function(mutationRecord) {
  document.getElementsByTagName('span')[3].style.transform = mirror
  console.log('style changed!');
}

 var observer1 = new MutationObserver(function(mutations) {
  
  arrsplit = document.getElementsByTagName('span')[3].style.transform.split(/[\(,)px]+/);
  replace = arrsplit[7].replace('deg','')
  mirror= arrsplit[0]+"("+parseFloat(arrsplit[1])*-1+"px"+", "+parseFloat(arrsplit[2])*1+"px"+")"
  +arrsplit[3]+"("+parseFloat(arrsplit[4])*1+", "+parseFloat(arrsplit[5])*1+")"+
  arrsplit[6]+"("+parseFloat(replace)*-1+"deg"+")";
  
  mutations.forEach(function(mutationRecord) {
  var transform1 = document.getElementsByTagName('span')[3].style.transform;
  document.getElementsByTagName('span')[0].style.transform = mirror
  
  });    
  });
  
  var target = document.getElementsByTagName('span')[0];
  var target2 = document.getElementsByTagName('span')[3];
  observer1.observe(target2, { attributes : true, attributeFilter : ['style'] });
  observer.observe(target, { attributes : true, attributeFilter : ['style'] });

这回答了你的问题吗？使用CSS variablesHi，谢谢你的回答，它真的很有效，但我设法做到了以下是我如何设法使它工作
var observer1 = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutationRecord) {
      var transform1 = document.getElementsByTagName('span')[3].style.transform;
document.getElementsByTagName('span')[0].style.transform = transform1
      
  });    
});

var target = document.getElementsByTagName('span')[0];

observer.observe(target, { attributes : true, attributeFilter : ['style'] });

var observer = new MutationObserver(function(mutations) {
  
  arrsplit = document.getElementsByTagName('span')[0].style.transform.split(/[\(,)px]+/);
  replace = arrsplit[7].replace('deg','')
  mirror= arrsplit[0]+"("+parseFloat(arrsplit[1])*-1+"px"+", "+parseFloat(arrsplit[2])*1+"px"+")"
  +arrsplit[3]+"("+parseFloat(arrsplit[4])*1+", "+parseFloat(arrsplit[5])*1+")"+
  arrsplit[6]+"("+parseFloat(replace)*-1+"deg"+")";

  mutations.forEach(function(mutationRecord) {
  document.getElementsByTagName('span')[3].style.transform = mirror
  console.log('style changed!');
}

 var observer1 = new MutationObserver(function(mutations) {
  
  arrsplit = document.getElementsByTagName('span')[3].style.transform.split(/[\(,)px]+/);
  replace = arrsplit[7].replace('deg','')
  mirror= arrsplit[0]+"("+parseFloat(arrsplit[1])*-1+"px"+", "+parseFloat(arrsplit[2])*1+"px"+")"
  +arrsplit[3]+"("+parseFloat(arrsplit[4])*1+", "+parseFloat(arrsplit[5])*1+")"+
  arrsplit[6]+"("+parseFloat(replace)*-1+"deg"+")";
  
  mutations.forEach(function(mutationRecord) {
  var transform1 = document.getElementsByTagName('span')[3].style.transform;
  document.getElementsByTagName('span')[0].style.transform = mirror
  
  });    
  });
  
  var target = document.getElementsByTagName('span')[0];
  var target2 = document.getElementsByTagName('span')[3];
  observer1.observe(target2, { attributes : true, attributeFilter : ['style'] });
  observer.observe(target, { attributes : true, attributeFilter : ['style'] });