width/height after transform

Question

How do I retrieve the width and height properties after I\'ve applied transform: rotate(45deg);?

Like, 11x11 square after rotation becomes 17x17 (Chrome

Answer 1

Even if you rotate something the dimensions of it do not change, so you need a wrapper. Try wrapping your div with another div element and count the wrappers dimensions:

Redited: the wrapper solution is not working properly, as the wrapper is not automatically adjusted to the contents of the inner div. Follow the mathematical solution:

var rotationAngle;

var x = $('#box').width()*Math.cos(rotationAngle) + $('#box').height()*Math.sin(rotationAngle);