javascript - 如何为元素添加新的变换样式？

设置CSS3时，转换属性的属性在列表中。我最初为一组图像设置了转换x，y值，一旦将它们放到一个区域中，我想将大小增加一倍（scale（2,2））。我似乎无法两全其美。我尝试过的一件事是检索转换值并重新分配属性。
我能够使用以下方法获取整个变换矩阵（matrix（1、0、0、1，-468，-959））

var width = window.getComputedStyle(event.relatedTarget,null).getPropertyValue('transform');
console.log(width);

它将矩阵（scaleX（），skewY（），skewX（），scaleY（），translateX（），translateY（））的值返回到控制台，但是我不确定如何解析它的translateX和translateY值。

我想知道是否可能只是将'scale（2,2）'附加到transform属性的方法。我可以用以下方法设置好：

event.relatedTarget.style.transform = scale(2,2);

但这只会覆盖我要保留的翻译。如果有人有任何建议，请告诉我-非常感谢:)

最佳答案

只需将当前矩阵与新的变换连接起来：

currentTransformMatrix +" scale(2.2) rotate(20deg)"

例：

function addTransform(el, transforms){
  var matrix = window.getComputedStyle(el, null).transform;
  el.style.transform = matrix +" "+ transforms;
}


var box = document.getElementById("box");
addTransform(box, "rotate(20deg) scale(2.2)");

#box{
  background:red;
  width: 40px;
  height: 40px;
  transform: translateX(100px);
  /* At a later time we want to add transforms rotation and scale
     but without losing the current translateX */
}

<div id="box"></div>

关于javascript - 如何为元素添加新的变换样式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36168080/