
В этой короткой статье я покажу как можно получить угол наклона элемента на странице.
Угол наклона задается с помощью css свойств, для каждого браузера свое свойство, вот например, поворот на 45 градусов выглядит так:
-webkit-transform: rotate(45deg); /* для хрома и сафари */ -moz-transform: rotate(45deg); /* для FireFox */ -ms-transform: rotate(45deg); /* для IE */ -o-transform: rotate(45deg); /* для оперы */
Чтобы получить угол средствами js нужно получить значение этих свойств, но если попытаться получить значение, то в результате мы получим вот такую строку:
matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, 0, 0)
В Этой строке 6 параметров, и ни один из них не является значением угла в градусах. Это матрица, по которой производится искривление элемента.
Первый параметр — это косинус угла, на который сделан поворот. Второй — синус угла, на который сделан поворот, Третий — минус(cos(a)*-1) косинус угла, и четвертый минус синус угла.
Пятый и шестой параметры определяют смещение по вертикали и горизонтали.
Для получения угла нам понадобится только первый и второй параметры, то есть синус и косинус угла. Дальше дело техники, обычная математика. Ниже приведен код для получения угла в градусах:
// функция для определения угла наклона элемента
function getDegreeElementById(id_element){
var element = document.getElementById(id_element);
var style = window.getComputedStyle(element, null);
// получаем значение стилей
var valueStyle = style.getPropertyValue("-webkit-transform") ||
style.getPropertyValue("-moz-transform") ||
style.getPropertyValue("-ms-transform") ||
style.getPropertyValue("-o-transform") ||
style.getPropertyValue("transform");
// если стилей нет, то угол 0 градусов
if(valueStyle == 'none') return 0;
// разбираем полученное значение
console.log(valueStyle);
var values = valueStyle.split('(')[1];
values = values.split(')')[0];
values = values.split(',');
// получаем синус и косинус
var cos = values[0];
var sin = values[1];
// вычисляем угол
var degree = Math.round(Math.asin(sin) * (180/Math.PI));
if(cos<0){
addDegree = 90 - Math.round(Math.asin(sin) * (180/Math.PI));
degree = 90 + addDegree;
}
if(degree < 0){
degree = 360 + degree;
}
return degree;
}
И пример использования:
<style>
#test-text-block{
width: 400px;
margin: 150px auto 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
</style>
<div id="test-text-block">тестовый текст</div>
// пример использования
var degree = getDegreeElementById(‘test-text-block’);
alert(degree);

Хорошая статья! Отличная готовая функция! Взял на вооружение!