CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ipburbank
ipburbank

Reputation: 151

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/

Upvotes: 6

Views: 5215

Answers (1)

tomsseisums
tomsseisums

Reputation: 13357

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.

Upvotes: 11

Related Questions