Get the width and height of rotated object after transform
This is the best working formula I have come up with:
var h = $(obj).height() * Math.abs(Math.cos(deg)) + $(obj).width() * Math.abs(Math.sin(deg));
var w = $(obj).width() * Math.abs(Math.cos(deg)) + $(obj).height() * Math.abs(Math.sin(deg));
The below code will work out the bounding box for a rotated object in JavaScript.
var obj = document.getElementById("obj"); // Get object
var bx = obj.clientWidth; // Width of rectangle
var by = obj.clientHeight; // Height of rectangle
var t = /[0-9]+/.exec(obj.style.transform)[0] * Math.PI / 180; // Convert to radians
var x = Math.sin(t) * by + Math.cos(t) * bx; // The bounding box width
var y = Math.sin(t) * bx + Math.cos(t) * by; // The bounding box height
document.write(x.toFixed(2), " ", y.toFixed(2)); // The width and height of finished bounding box of item rounded to 2 decimal places<div id="obj" style="width: 200px; height: 200px; transform: rotate(30deg); background: red;"></div>