How can I measure the width and height of a rotated element on Javascript?

Question

There is a bug with my design interface where the width and height of my selected div are false when rotated.

Here's a schema of what I have and another one of what I want.

I want to find the formula using Javascript, how can I possibly write it ?

PS : I already have the angle, the width and the height of the first schema, no need to calculate it again.

Answer 1

Width and height are not changing, when rotate the element .its also the same see the snippet .get the value via dom use with

1. offsetWidth
2. offsetHeight

 var rot =document.getElementById("rot"); console.log(rot.offsetWidth,rot.offsetHeight) 

 #rot{ width:100px; height:40px; background-color:pink; transform:rotate(30deg) } 

 <div id="rot"></div> 

Answer 2

If it is equations you need, Then here you go.

w-y*sin(theta) = x*cos(theta)
h-y*cos(theta) = x*sin(theta)

Where,

w = given width
h = given height
x = width you need
y = height you need
theta = angle

A little trigonometry goes a long way.

Solving this simultaneous equation gives me -

2x = (w+h)/(cos(theta)+sin(theta)) + (w-h)/(cos(theta)-sin(theta))
2y = (w+h)/(cos(theta)+sin(theta)) - (w-h)/(cos(theta)-sin(theta))

Feel free to convert to Math functions.