Get the Scale Value of an Element

Get the scale value of an element?

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?

Read css scale value using JS or Jquery

Possible duplicate of Get the scale value of an element?:

var matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/;

var matches = $('#id').css('transform').match(matrixRegex);

console.log(matches)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="id" style="transform: scale(2,3)"></div>

Retrieve width/height of a css3 scaled element

getBoundingClientRect() returns the correct values for me.

jsFiddle.

Is there a way to add the scale value for transform in css using JS

You can just pass in the transform property in the same way you passed in margin-top to your .big element. jQuery already handles the prefixing for you on the transform property, so you can simply pass in your new scale value like this:

$('.small').css({
    transform: 'scale(' + scale + ')'
});

JSFiddle demo.

For example, the .small element on Chrome will be given the -webkit-transform property whereas on Firefox it will be given the -moz-transform property.

As for how to generate the scale values, you can simply base these upon the maximum of width or height according to some base value:

var height = $('.small').height(),
    width = $('.small').width(),
    largest = height > width ? height : width,
    base = 150,
    scale;

scale = base / largest;

Here the base value is 150. If the largest of the height or width is 300, for example, the scale will become 0.5 (as 150 / 300 = 0.5).

JSFiddle demo.

---

Related Topics