如何在Javascript上测量旋转元素的宽度和高度？

我的设计界面存在一个缺陷，旋转时，我选择的div的宽度和高度为false

这是一个我拥有的模式，另一个是我想要的模式

我想用Javascript找到公式，我怎么可能写呢

---

PS：我已经有了第一个模式的角度、宽度和高度，无需再次计算。

宽度和高度在
旋转
元素时不会发生变化。这与查看片段相同。通过dom使用




var rot=document.getElementById（“rot”）；
console.log（rot.offsetWidth，rot.offsetHeight）
#腐烂{
宽度：100px；
高度：40px；
背景颜色：粉红色；
变换：旋转（30度）
}
旋转
元素时，
宽度
和
高度
不会改变。这与查看代码段相同。通过dom使用




var rot=document.getElementById（“rot”）；
console.log（rot.offsetWidth，rot.offsetHeight）
#腐烂{
宽度：100px；
高度：40px；
背景颜色：粉红色；
变换：旋转（30度）
}
如果你需要的是方程式，那就给你

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

在哪里,

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

一点三角学有很长的路要走

解这个联立方程给了我-

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))

您可以随意转换为数学函数。
如果您需要的是方程，那么就在这里

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

在哪里,

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

一点三角学有很长的路要走

解这个联立方程给了我-

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))

请随意转换为数学函数。
看看这个@DarkBee这是建议的JSFIDLE，不幸的是它不起作用，你会看到当你以0度旋转时，高度和宽度会发生变化，（它应该始终保持在200）。看看这个@DarkBee这是建议的JSFIDLE，不幸的是它不起作用，您将看到，当以0度旋转时，高度和宽度会发生变化（应始终保持在200度）。