Öğeye yeni dönüşüm stili nasıl eklenir?

Question

CSS3 dönüşümü özelliği özelliklerini ayarlarken listede yer alır. Başlangıçta bir dizi görüntü için çeviri x, y değerlerini belirledim ve bir bölgeye düştüklerinde boyutu ikiye katlamak istiyorum (ölçek (2,2)). Hem işe yaramayacak gibi görünmüyorum. Denediğim bir şey tercüme değerleri almak ve mülkü yeniden atamaktır. I) matris değerlerine (scaleX(), skewY geri

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

(kullanarak tüm matrisi (matris (1, 0, 0, 1, -468, -959)) elde edebildi , skewX(), scaleY(), translateX(), translateY()) konsoluna ancak translateX ve translateY değerleri için nasıl ayrıştırılacağından emin değilim.

Dönüştürme özelliğine "ölçek (2,2)" eklemenin bir yolu olup olmadığını merak ediyordum.

ile yalnızca iyi bir şekilde ayarlayabilirim, yalnızca korumak istediğim çevirinin üzerine yazıyor. kimse herhangi bir tavsiye varsa lütfen bildirin - çok takdir :)

Answer 1

Basitçe contcatenateyeni dönüşümler ile şimdiki matris:

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>