Как получить фактическую (не оригинальную) высоту повернутого CSS-элемента

Question

Мне нужно получить фактическую высоту нескольких различных элементов (для точного позиционирования настраиваемой подсказки), и некоторые из этих элементов (не все) вращаются. $ (elem) .outerHeight () возвращает исходную высоту вместо фактической отображаемой высоты.

Вот скрипка с очень простым примером: http://jsfiddle.net/NPC42/nhJHE/

Я вижу возможное решение в этом ответе: https://stackoverflow.com/a/8446228/253974,, но все еще надеюсь, что есть более простой способ.

Answer 1

Счистив мою школьную геометрию и мои потрясающие графические навыки, я составил эту схему. Если у вас есть переменные width, height и rotation в javascript, вы можете выразить высоту следующим образом:

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 .