Get div size with JS after CSS3 transformation

Question

I am trying to get the height of an element in JavaScript after applying one/several CSS3 transformations on it.

#transformed{
    transform:scale(.5);
}

Unfortunately, JQuery's outerHeight doesn't seem to do this naively.

$('#after').outerHeight(); //not affected by the transformation

Example: http://jsfiddle.net/mQ2nT/

Answer 1

You can use getBoundingClientRect to get the dimensions and positions after the transformation.

Simply, transform your elements, and:

$('#after')[0].getBoundingClientRect();
// note the [0], the function is DOM not jQuery's.

The best thing is that this will also return proper positions, dimensions after every transformation you apply.

You are free to rotate, skew, translate and everything else what CSS provides. gBCR will handle it.