Get the value of -webkit-transform of an element with jquery

Question

I\'m manipulating a div with the new cool css3 way of doing a transform like this:

$(\"#thediv\").css(\"-webkit-transform\",\"translate(-770px, 0px)\");
         


        

Answer 1

You could split the string into an array and get the desired value as usual. Here's a little helper function that does the split part.

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

Update

To preserve decimals: rgba(0, 0, 0, 0.5)

and negatives: matrix(1, 0, 0, 1, -770, 0)

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

Update2

RegExp based solution that preserves decimal and negative numbers:

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']