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?
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?
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?