Uzyskaj wartości translate3d elementu div?

Question

Say div ma to zastosowanie do niego:

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

Jak mogę odzyskać te wartości z jQuery?

Answer 1

Wartość zostanie zapisana jako matrix lub , w zależności od tego, czy wartość z została ustawiona. Zakładając, że nie ma innych transformacji, dla matrycy 2D X i Y są ostatnimi dwiema wartościami. W przypadku macierzy 3D X, Y, Z, 1 to ostatnie cztery cyfry.

Można użyć wyrażenia regularnego, aby uzyskać wartości:

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

EDYCJA: To źle, zignoruj ​​to.

Myślę, że jeśli można zrobić coś jak ...

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

Pewnie można uzyskać translate3d(0px, -200px, 0px) plecy.

Może mógłbyś następnie sparsować ten ciąg? wydaje się jednak trochę hack.

Answer 3

Jeśli mecz() wzór Zaakceptowanych odpowiedź na zmianę tego dodaje wsparcie dla liczb ujemnych:

$(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

Jeśli zaktualizuj wyrażenie regularne do następujących dodaje obsługę dla tych nieparzystych przypadków, gdy twoja transformacja ma pływa:

/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*))\))/