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

I have coded the simplest solution that ALSO works in Safari, Chrome AND Firefox :)

The trick is NOT to reference the

.css("transform")

but the

.css("translate")

property instead :

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);

I'm delighted to have found such an economical solution since I have been dealing with 3D transforms in webkit and 2D transforms in Firefox simultaneously, and using this method the property values can be accessed directly :)