7

I am getting -moz-transform: translate(-283.589px, 0px) from dom by doing element.style[vendor + 'Transform'] . Now i want to extract the value -283.589px to use it in my application but not getting the exact way to fetch it. If i do console.log($('.slide').css("-moz-transform")) it returns the matrix value as matrix(1, 0, 0, 1, -283.589px, 0px) . Is there a suitable way in jquery to directly fetch the value -283.589px. I dont want to do any matrix calculation.

user850234
  • 3,373
  • 15
  • 49
  • 83
  • You don't need to calculate anything because the value is right there... – Tim S. Dec 22 '11 at 08:36
  • The value is here but how can i use it. I want to do something like $('id').animate(left:X); where X = -283.589px. This is want i am looking for. – user850234 Dec 22 '11 at 08:50
  • can't you just access the matrix as an array? `var x = matrix[5];` – Tim S. Dec 22 '11 at 09:02
  • Yes can be done by converting it to an array but dont want to do any such calculation – user850234 Dec 22 '11 at 09:10
  • possible duplicate of [Get the value of -webkit-transform of an element with jquery](http://stackoverflow.com/questions/5968227/get-the-value-of-webkit-transform-of-an-element-with-jquery) – yckart Jul 26 '13 at 16:45

4 Answers4

26

I've got good news and bad news.

I'll start with the bad news: After examining the object that jQuery returns, the matrix object is nothing but a string and there's absolutely no way you can get another object but a string. As much we would like to disagree that it shouldn't be a string: CSS values are strings, hence jQuery returns strings.

So, whether you like it or not, you really have to parse the string in order to get the value. The good news is: I've got two solutions.

Now, if you're VERY sure that the first couple of values are ALWAYS the same you could simply use substring. But, next problem: in Google Chrome, the value -283.589px is being changed to -283.5889892578125.

Honestly, you need a more advanced string parser to get the correct value. I welcome regular expression:

var matrix = $('.selector').css('-moz-transform');
var values = matrix.match(/-?[\d\.]+/g);

This gets all the values of your string.

By selecting the right index, you can get your value:

var x = values[5];

That's the best solution I can provide and I'm positive it's the only possible solution.

Tim S.
  • 13,597
  • 7
  • 46
  • 72
  • This doesn't work with negatives ;) `matrix(1, 0, 0, 1, -770, 0) === [1, 0, 0, 1, 700, 0]` – yckart Jul 13 '13 at 11:38
  • 1
    @yckart I totally forgot about that! I've changed the expression to match negative numbers too, thanks! – Tim S. Jul 26 '13 at 06:53
  • Or you could just find the first brace and use split: `var matrix = $('.selector').css('transform'), idx=matrix.indexOf('('), values=matrix.substring(idx+1, matrix.length-1).split(';');` I bet that performs better. – Stijn de Witt Aug 24 '15 at 18:06
  • @StijndeWitt Given the matrix string is relatively short and the Regular Expression rather simple, I doubt the performance will differ significantly. If one is to run this code millions of times, micro-optimisations like yours might make a difference. If that’s the case, I’d recommend caching/optimising the jQuery call first, as that’s probably where the janks are. But still, good point. – Tim S. Aug 26 '15 at 07:38
  • 1
    when outputting the index [5], you are getting the y value. don't forget indexes start at [0]. so ScaleX would be index [4] instead... – Studocwho Sep 26 '17 at 00:33
4

Since I constantly need to use jQuery together with TweenMax and since TweenMax already took care of all the parsing of various types of transformation strings as well as compatibility issues, I wrote a tiny jquery plugin here (more of a wrap up of gsap's) that could directly access these values like this:

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

The list of properties you could get/set, along with their initial properties:

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
Lucia
  • 13,033
  • 6
  • 44
  • 50
  • 1
    Thanks for this. Used bower to install it into a rails project and it works great! So much cleaner than the other answers here. Super convenient for use with gsap. – Starfs Aug 18 '16 at 21:09
0

using var matrix = $('.selector').css('-moz-transform');,

matrix.match(/([-+]?(?:\d*\.)?\d+)\D*, ([-+]?(?:\d*\.)?\d+)\D*\)/);

would give you an object with { 0, 1, 2, index, input }

[1] = x, [2] = y

user3123242
  • 29
  • 3
0

While jQuery cannot do this alone, a Regex method would be better.
In the below code the parseComplexStyleProperty functions takes a string which is, for example, the style attribute of an element and breaks it into an Object of keys and values:

function parseComplexStyleProperty( str ){
   var regex = /(\w+)\((.+?)\)/g,
       transform = {},
       match;

   while( match = regex.exec(str) )
       transform[match[1]] = match[2];
  
   return transform;
}

//////////////////////////////////////////

var dummyString = $('something').attr('style'),
    transformObj = parseComplexStyleProperty(dummyString);


console.log(dummyString, transformObj)
vsync
  • 118,978
  • 58
  • 307
  • 400