Javascript jak dostat pozici translateX
Jak dostat z css stylů pozici objektu, pokud stylujeme pomocí vlastnosti translateX. Např:
transform:translateX(-10px) translateY(80px);
A chceme třeba prvek pomocí této vlastnosti animovat a posouvat s ním?
var posun = 100;
function soupniObjekt(e){ var styl = window.getComputedStyle(e); //vytahnuti stylu elementu var transMatice = styl.getPropertyValue("transform"); //vytahnuti hodnoty transform ve formatu jakesi transformacni matice var matrix = new WebKitCSSMatrix(transMatice); //prevedeni textu na matici? var tX=matrix.m41; //vytazeni translateX (hodnoty 41 z matice) var tY=matrix.m42; //vytazeni translateY (hodnoty 42 z matice)
var txNove = parseInt(tX, 10) - posun; //nova souradniceX = pretypovani na cislo a pricteni posunu
e.style.transform = "translateX("+txNove+"px) translateY("+tY+"px)"; //posun <-- , nastaveni novych hodnot
}