要素に新しい変換スタイルを追加するには？

Question

CSS3トランスフォームのプロパティ属性を設定すると、リストに含まれます。最初に一連の画像のx、yの値を変換して、一度ゾーンにドロップしたら、サイズ（倍率（2,2））を2倍にしたい。私は傾けることはできません両方の作業を取得するようです。私が試したことの1つは、変換値を取得してプロパティを再割り当てすることです。 I）は、skewY（（scaleXプロパティ（）行列の値を返さ

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

を使用して全体の変換行列（行列（1、0、0、1、-468、-959））を取得することができました、skewX（）、scaleY（）、translateX（）、translateY（））をコンソールに変換しますが、translateXとtranslateYの値を解析する方法はわかりません。

変換プロパティに 'scale（2,2）'を追加する方法があるかどうかは疑問でした。

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

しかし、それは私が保存したい翻訳を上書きするだけです。誰もが何かアドバイスを持っている場合は私に知らせてください - 感謝:) 新しい変換と

Answer 1

単にcontcatenate現在行列：

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

Exaple：

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>