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,sc
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?
The simplest solution to find out the scale factor between the document and an element is the following:
var element = document.querySelector('...');
var scaleX = element.getBoundingClientRect().width / element.offsetWidth;
This works because getBoundingClientRect returns the actual dimension while offsetWidth/Height is the unscaled size.
You could use the following:
var element = document.getElementById("elementID");
// returns matrix(1,0,0,1,0,0)
var matrix = window.getComputedStyle(element).transform;
var matrixArray = matrix.replace("matrix(", "").matrix.split(",");
var scaleX = parseFloat(matrixArray[0]); // convert from string to number
var scaleY = parseFloat(matrixArray[3]);
// bonus round - gets translate values
var translateX = parseFloat(matrixArray[4]);
var translateY = parseFloat(matrixArray[5]); // parseFloat ignores ")"
Too late for the OP but might be useful in the future. There is a straightforward way to do it using splits:
function getTransformValue(element,property){
var values = element[0].style.webkitTransform.split(")");
for (var key in values){
var val = values[key];
var prop = val.split("(");
if (prop[0].trim() == property)
return prop[1];
}
return false;
}
This is webkit specific, but can easily be extended for more browsers modifying the fist line.
If you need to target webkit only (because it's for the iPhone, or iPad) the most reliable and fast way is using the native javascript webkit provides:
node = $("#yourid")[0];
var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform);
alert(curTransform.a); // curTransform is an object,
alert(curTransform.d); // a through f represent all values of the transformation matrix
You can view a demo here: http://jsfiddle.net/umZHA/