如何获得CSS旋转元素的实际（非原始）高度

我需要获得几个不同元素的实际高度（为了精确定制工具提示定位），并且这些元素中的一些（不是全部）被旋转。 $（elem）.outerHeight（）返回原始高度，而不是实际显示的高度。

这是一个非常简单的例子： http ： //jsfiddle.net/NPC42/nhJHE/

我在这个答案中看到了一个可能的解决方案： https ： //stackoverflow.com/a/8446228/253974 ，但我仍然希望有一种更简单的方法。

Answer 1

除了我的高中几何和我强大的图形技能，我把这个图放在一起。 如果你在javascript中有变量width ， height和rotation ，你可以这样表达高度：

 var rotated_height = width * Math.sin(rotation) + height * Math.cos(rotation); 

Answer 2

如果您只使用45度的旋转并且宽度和高度始终相等，则可以使用相对简单的数学斜边公式计算实际旋转高度：

这表明斜边长度的平方等于另外两边长度的平方和。

在这种情况下，最长的一侧是从角落到对角的对角线。 这将大致转换为jQuery，如下所示：

 Math.sqrt(Math.pow($('#diamond').height(), 2) + Math.pow($('#diamond').width(), 2)) 

查看更新的jsFiddle 。