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

I learned web design playing with Geocities and Dreamweaver when I was younger. I was able to step up my game with Jon Duckett's book, HTML and CSS: Design and Build Websites. It's still the book I recommend the most to my friends when they want to learn to build websites.