Get div size with JS after CSS3 transformation
css, html, javascript, jquery
Solution
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.
Problem
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/