Get the scale value of an element?

Issue

I’m wondering how I can get the scale value of an element?

I have tried $(element).css('-webkit-transform'); which returns matrix(scaleX,0,0,scaleY,0,0); Is there a way of getting scaleX and scaleY only?

Solution

If it was specified by a matrix I guess you can’t with a straightforward way, but you can easily parse the value:

var matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/,
    matches = $(element).css('-webkit-transform').match(matrixRegex);

matches[1] will contain scaleX and matches[2] will contain scaleY. If it’s possible that other transformations have also been applied, you’d need to slightly tweak the regex, because now it assumes that all other parameters are 0.

A way to just get the scale values might be to remove any transforms, measure the computed width/height of the element and then add them back and measure again. Then divide new/old values. Haven’t tried it, but it might work. jQuery itself uses a similar approach for many measurements, it even has an undocumented $.swap() function just for this.

PS: You are using -o-transform -moz-transform and -ms-transform too, right?

Answered By – Lea Verou

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published