Obtener el valor de-webkit-transform de un elemento con jquery

Puede dividir la cadena en una matriz y obtener el valor deseado como de costumbre. Aquí hay una pequeña función auxiliar que hace la parte dividida.

function matrixToArray(str) {
  return str.match(/\d+/g);
}

Actualización

Para preservar los decimales: rgba(0, 0, 0, 0.5)

Y negativos: matrix(1, 0, 0, 1, -770, 0)

function matrixToArray(str) {
  return str.split('(')[1].split(')')[0].split(',');
}

Update2

RegExp solución basada que conserva números decimales y negativos:

function matrixToArray(str) {
  return str.match(/(-?[0-9\.]+)/g);
}

matrixToArray('rgba(0, 0, 0, 0.5)'); // => ['0', '0', '0', '0.5']
matrixToArray('matrix(1, 0, 0, 1, -770, 0)'); // => ['1', '0', '0', '1', '-770', '0']

Recomendaría usar el objeto WebkitCSSMatrix. http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/WebKitCSSMatrix/WebKitCSSMatrix.html#//apple_ref/doc/uid/TP40009363

Este objeto tiene como atributos los elementos matriciales. También proporciona funciones de conveniencia para varias transformaciones.

La razón por la que obtiene el valor de la cadena de matriz, es que la función css de jQuery está obteniendo el estilo calculado (el resultado de window.getComputedStyle($("#thediv")[0]).webkitTransform).

Para obtener el valor real de la cadena al que la configuró en la llamada anterior ("translate(-770px, 0px)") puede usar:

var t = $("#thediv")[0].style.webkitTransform;

A partir de eso, podría usar métodos de cadena para obtener el valor x, por ejemplo:

t.substring(t.indexOf("(") + 1, t.indexOf(",") - 2)

Que da -770. Sin embargo, ten en cuenta que esto solo es aceptable si sabes que el valor existe y está en la forma en que estás usando (con solo un translate(xpx, ypx), ya que otros valores son válidos!

Si prefiere usar el estilo computado, entonces (para agregar a la sugerencia de @Maz), para obtener el valor 5 (la transformación x), puede hacer:

new WebKitCSSMatrix($("#thediv").css("-webkit-transform")).e;

Para obtener la sexta (la transformación y) se utiliza la propiedad f de la matriz.

Dado que constantemente necesito usar jQuery junto con TweenMax y ya que TweenMax ya se encargó de todo el análisis de varios tipos de cadenas de transformación, así como problemas de compatibilidad, escribí un pequeño plugin de jquery aquí (más bien un resumen de gsap) que podría acceder directamente a estos valores como este:

$('#ele').transform('rotationX') // returns 0
$('#ele').transform('x')         // returns value of translate-x

La lista de propiedades que podría obtener / establecer, junto con sus propiedades iniciales:

perspective: 0
rotation: 0
rotationX: 0
rotationY: 0
scaleX: 1
scaleY: 1
scaleZ: 1
skewX: 0
skewY: 0
x: 0
y: 0
z: 0
zOrigin: 0

Pegar de mi otra respuesta, espero que esto ayude.

He codificado la solución más simple que TAMBIÉN funciona en Safari, Chrome Y Firefox :)

El truco NO es hacer referencia a la

.css("transform")

Pero el

.css("translate")

Propiedad en su lugar:

var matrix = $("#thediv").css('translate');
console.log ( matrix[1] ); 
// matrix result is of form [x , y]
// so for example matrix[1] will give you the transformY value :)
$('html,body').animate({scrollTop: matrix[1]}, 750);

Estoy encantado de haber encontrado una solución tan económica ya que he estado tratando con transformaciones 3D en webkit y transformaciones 2D en Firefox simultáneamente, y utilizando este método se puede acceder directamente a los valores de propiedad:)