Surrounding rectangle with and height of absolute rotated elements in Javascript

Question

I have a few DIVs (can be images too) elements with absolute position and rotated and scaled using CSS.

How can I calculate the total width and height that the element occupy (the rectangle around then). Checking the offset() of position() doesn't give me the right results.

I need a solution in Javascript/Jquery if possible, or the Math so I can calculate it myself if there isn't any other options. Thanks.

What I've tried:

• use offset, but it doesn't give me the right point
• position(), but it doesn't take the rotation into account

CSS of an elements for example:

position:absolute;
-webkit-transform: rotate(-280deg);
-webkit-transform-origin: 43px 33px;

Answer 1

getBoundingClientRect() will be able to give you the position and dimensions of each of your elements, after any CSS transforms are applied to them.

From there, it's a matter of figuring out the total height (subtracting the minimum top from the maximum bottom) and width (subtracting the minimum left from maximum `right).

Here's a fiddle example and here's a semi-related question that should get you started.