Question: I'm creating a selection tool where the user may scale and rotate an HTMLElement using a selection control element. Rotating the element and scaling it when it's not rotated, works fine. I'm now a bit lost with the math to scale an element which is already rotated.

Here is the simplified code.

```
// rotating the element
selection.style.transform = "rotate(" + degrees + "deg)";

```

...

```
// scaling the element
var left = selection.offsetLeft;
var top = selection.offsetTop;
selection.style.width = (e.clientX - left) + "px";
selection.style.height = (e.clientY - top) + "px";

```

How do I calculate the new width/height when the element is rotated and its new position?

A full code example would be a bit too long so I've made a [fiddle](https://jsfiddle.net/kirschkern/yaog4x0v/13/) showing the current state and issue.

Thanks for any help, link to the necessary math or code example.

Answer: 
Finally I've found a working solution. The key was to calculate the new center point by getting the current mouse position and the opposite corner. Now I rotate both points back to its unrotated state and get the bounds to use.
The relevant code looks like this:

```
// the current rotation angle in degrees
angle = me.angle;
// the current mouse point (dragging a selection control)
var mousePoint = new Point(e.clientX, e.clientY);
// Get opposite point. Rotate it to get the visual position
var topLeft = new Point(left, top).rotate(center, angle);
// calculate the new center 
var centerPoint = mousePoint.getMiddle(topLeft);
// rotate the opposite point back around the new center
var topLeftRotated = topLeft.rotate(centerPoint, -angle);
// rotate the mouse point around the new center.
var mousePointRotated = mousePoint.rotate(centerPoint, -angle);

// now we have the top left and lower right points and 
// can calculate the dimensions
var x1 = topLeftRotated.x;
var x2 = mousePointRotated.x;
var w = x2-x1;
var y1 = topLeftRotated.y;
var y2 = mousePointRotated.y;
var h = y2-y1;

me.selection.style.width = w + "px";
me.selection.style.height = h + "px";
me.selection.style.left = x1 + "px";
me.selection.style.top = y1 + "px";

```

See the [updated fiddle](https://jsfiddle.net/kirschkern/yaog4x0v/27/)
(Note. This is more a proof of concept and no production ready solution.)

I'm open to more elegant solutions.
Maybe `getBoundingClientRect` is what you want.

```js
console.log(document.querySelector('.rotate').getBoundingClientRect())
```

```css
.rotate {
  width: 80px;
  height: 50px;
  background: blue;
  transform: rotate(45deg);
}
```

```html
<div class="rotate"></div>
```

You could also make life easy and just use a scale transformation?