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

Question

我需要获得几个不同元素的实际高度（为了精确定制工具提示定位），并且这些元素中的一些（不是全部）被旋转。 $（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度旋转且宽度和高度始终相等，则可以使用相对简单的数学Hypotenuse公式计算实际旋转高度：

  

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

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

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

请参阅更新后的jsFiddle。