Get div size with JS after CSS3 transformation

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/

Answers:

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.