Question

当设置CSS3转换属性属性在列表中时。我最初为一组图像设置了翻译x，y值，一旦他们放入一个区域，我想要加倍大小（比例（2,2））。我似乎无法兼顾两者。我尝试过的一件事是检索翻译值并重新分配属性。我能够使用

获得整个变换矩阵（矩阵（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值。

我想知道是否可以选择追加规模（2,2）＆＃39;转换属性。我可以设置得很好：

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

但它只是覆盖了我想保留的翻译。如果有人有任何建议，请告诉我 - 非常感谢：）

Answer 1

contcatenate 当前矩阵与新变换：

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

的exaple：

＆＃13;

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)");

＆＃13;

#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 */
}

＆＃13;

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

＆＃13;

如何为元素添加新的转换样式？

1 个答案: