¿Obtener valores de translate3d de un div?

Question

Diga un div tiene esto que se le aplica:

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

¿Cómo podría recuperar esos valores con jQuery?

Answer 1

El valor se almacena como matrix o matrix3d, dependiendo de si se configuró el valor z o no. Suponiendo que no haya otras transformaciones, para una matriz 2D, X e Y son los dos últimos valores. Para una matriz 3D, X, Y, Z, 1 son los últimos cuatro dígitos.

Se podría utilizar una expresión regular para obtener los valores:

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

EDITAR: Esto es incorrecto, ignore esto.

creo que si haces algo como ...

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

probablemente obtendría la parte posterior translate3d(0px, -200px, 0px).

¿Tal vez podría analizar esa cadena? parece un poco hackeo.

Answer 3

Si cambia el patrón de la respuesta aceptada partido() a esto se añade soporte para los números negativos:

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

Si actualice la expresión regular a lo siguiente agrega soporte para esos casos impares cuando su transformación tiene flotantes:

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