Get Scale Value of CSS Transformation through Javascript

April 5, 2016 — Leave a comment

Scale Value with Javascript

I was looking for a quick and easy way to get a scale value of a css -webkit-transform with javascript.

The html and css:

<div id="transformed"></div>

#transform {
    -webkit-transform: scale(.8);
}

First, we need to get the property value of -webkit-transform. I’ll use jQuery.

var div = $('#transform').css('transform');

The transform property will return matrix(0.8, 0, 0, 0.8, 0, 0).

To get the scale from the matrix, we will need to turn the matrix into individual values, then we can do math:
var values = div.split(‘(‘)[1];
values = values.split(‘)’)[0];
values = values.split(‘,’);

var a = values[0];
var b = values[1];

var scale = Math.sqrt(a*a + b*b);
console.log(scale) // .80

Mike

Posts Twitter Facebook

My name is Michael Le, and I am a web developer.

No Comments

Be the first to start the conversation.

Leave a Reply