Ottieni valori convertiti3d di un div?

Question

Dire un div è presente ad esso applicata:

-webkit-transform: translate3d(0px, -200px, 0px) 

Come potrei recuperare quei valori con jQuery?

Answer 1

Il valore viene memorizzato come matrix o matrix3d, a seconda che il valore z sia stato impostato o meno. Assumendo nessun'altra trasformazione, per una matrice 2D, X e Y sono gli ultimi due valori. Per una matrice 3D, X, Y, Z, 1 sono le ultime quattro cifre.

Si potrebbe usare un'espressione regolare per ottenere i valori:

function getTransform(el) { 
    var results = $(el).css('-webkit-transform').match(/matrix(?:(3d)\(\d+(?:, \d+)*(?:, (\d+))(?:, (\d+))(?:, (\d+)), \d+\)|\(\d+(?:, \d+)*(?:, (\d+))(?:, (\d+))\))/) 

    if(!results) return [0, 0, 0]; 
    if(results[1] == '3d') return results.slice(2,5); 

    results.push(0); 
    return results.slice(5, 8); 
} 

Answer 2

EDIT: Questo è sbagliato, ignoralo.

penso che se fai una cosa del genere ...

var styles = $('.myclass').css('-webkit-transform'); 

si sarebbe probabilmente ottenere la parte posteriore translate3d(0px, -200px, 0px).

Forse potresti quindi analizzare quella stringa? sembra un po 'un trucco.

Answer 3

Se si cambia match() modello della risposta accettata a questo si aggiunge il supporto per i numeri negativi:

$(el).css('-webkit-transform').match(/matrix(?:(3d)\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))(?:, (-{0,1}\d+)), -{0,1}\d+\)|\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))\))/) 

Answer 4

Se aggiorna l'espressione regolare al seguente aggiunge i supporti per quei casi strani quando la tua trasformazione è mobile:

/matrix(?:(3d)\(-{0,1}\d+\.?\d*(?:, -{0,1}\d+\.?\d*)*(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*)), -{0,1}\d+\.?\d*\)|\(-{0,1}\d+\.?\d*(?:, -{0,1}\d+\.?\d*)*(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*))\))/