How to get transform matrix and matrix3d values in jQuery?

1
votes

I have various elements performing various transform animations and I need to get their values

  • translateX
  • translateY
  • translateZ
  • rotateX
  • rotateY
  • rotateZ

  • scale

    $('.selector').css('transform');

sometimes it gives me a matrix() sometimes a matrix3d, and I have no idea how can I safely get my values I need.

What I need is, no matter if the current transform is a matrix or matrix3d, I need all the above values, even if they are undefined or NaN.

1
jquerycsstransform
I already know that, but can I get all these values even if undefined and no matter if it's a matrix or matrix3d? – thednp
Sorry I somehow read your first line the wrong way. – t.niese
The problem is that the those values can be placed multiple times in the transform property. Imagine you have translateX rotateY translateX to change the axis where you rotate the element around. While the animation active you can AFAIK only access the compute values. While not fully related, this might help you: Get Value of CSS Rotation through JavaScript – t.niese
I already checked that, but you still don't understand what I need, I will update the question. – thednp
I thought you mean: You have a animation from on state to another and you want to get the values while animating? A transformation is not like an object having the properties translateX, translateY, ... . But an array with transformation applied in order. The transformations and their order don't need to be the same between both states, thats IMHO the reason why you won't get those individual transformation but only the final matrix. But if it is a controlled setup you might be able to retrieve it form the matrix – t.niese

1 Answers

0
votes

I managed to get something to work via $('.selector').data('key','value'). The idea is to get these values after they have been changed and animation has ended.

So to put it short:

  • when animation ends
$('.selector').data('translateX', translateXvalue);
  • when a new animation begins, I may need this translateX value as a starting point
var previousX =  $('.selector').data('translateX');

I know there are some other methods using trigonometry to calculate matrix values, but this is just so much suited for my needs. This works great with 2D animations, a bit sloppy with 3D, it's better and I think also more performance driven.

I hope this helps somebody, best of luck.