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.

see this [answer](https://stackoverflow.com/a/18356970/446594) — DarkBee, Jun 02 '17 at 06:25
@DarkBee http://jsfiddle.net/x5Qgx/ this is the JSFiddle suggested, unfortunately it doesn't work, you'll see that when you rotate in at 0 deg, the height and the width with changes, (it should always stay to 200). — Horai Nuri, Jun 02 '17 at 16:27

score 3 · Accepted Answer · answered Jun 02 '17 at 06:28

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

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>

score 3 · Answer 2 · 2017-06-02T07:21:33.960

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.

2 Answers2