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

【问题标题】：How to get actual (not original) height of a CSS-rotated element如何获得 CSS 旋转元素的实际（非原始）高度
【发布时间】：2012-03-21 03:03:03
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

感谢 Starx 的编辑。这是帖子最重要部分的一个非常关键的错误！
谢谢，我明白了，但是你错过了我正在处理几个元素，只有其中一些是旋转的。我正在寻找一种通用方法“获取元素的高度”，而无需预先知道它已被旋转。但如果我找不到 - 我将不得不使用这种方法，是的:) 再次感谢！
@NPC：如果旋转为 0，则此方法在没有特殊情况下仍然有效，因为 sin(0) == 0 和 cos(0) == 1。
是的，但这需要知道旋转。由于没有更好的解决方案，我接受你的，但实际上它需要处理变换矩阵。我创建了一个小提琴来证明这一点，如果有人（包括我在内 :)）将来会需要它：jsfiddle.net/NPC42/nhJHE（但看到这个怪物我认为最好更改算法以在旋转项目上放置一些类，以避免噩梦）。

【解决方案2】：

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

这表明斜边的长度的平方等于其他两条边的长度的平方和。

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

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

查看更新后的jsFiddle。

【讨论】：