Получить угол поворота элемента jquery

110
29 марта 2021, 05:40

Задача такова есть div блок

<div class="trick"></div>

в разные моменты времени - его вращает другой скрипт на определенный угол мне надо получить в переменную на какой угол в данный момент повернуть этот блок

пробовал получить вот так

 console.log($('.trick').css('transform'));

выдает значения такие matrix(1, 0, 0, 1, 0, 0)

но я к сожалению не могу получить из матрицы свойства transform именно поворот, как это сделать? rotate

Answer 1
var el = document.getElementById("thing");
var st = window.getComputedStyle(el, null);
var tr = st.getPropertyValue("-webkit-transform") ||
         st.getPropertyValue("-moz-transform") ||
         st.getPropertyValue("-ms-transform") ||
         st.getPropertyValue("-o-transform") ||
         st.getPropertyValue("transform") ||
         "FAIL";

Здесь можно почитать подробнее детально>>>

Answer 2

Атрибут transform, в случае когда у элемента установлен rotate возвращает матрицу 2д поворота которая ни что иное как:

cos(t) -sin(t) 
sin(t)  cos(t) 
  0       0    

для нахождения угла в декартовой системе координат есть специальная функция atan2(y, x)

Искомый угол в радианах можно найти по этой "формуле", соответственно нужно взять из матрицы 2 числа и передать их atan2:

t = atan2(sin(t), cos(t))

requestAnimationFrame(calc); 
 
function calc(t){ 
  requestAnimationFrame(calc); 
 
  var tr = getComputedStyle(trick).transform; 
  var values = tr.split(/\(|,|\)/); 
  // угол в радианах 
  var angle = Math.atan2(+values[2], +values[1]);  
  // приводим угол к диапазону 0-360 
  val.textContent = ((angle * (180/Math.PI)+360)%360).toFixed(0)  
 
}
#trick { 
  padding:50px; 
  width:50px; 
  height:50px; 
  position:absolute; 
  animation: 10s rot infinite linear; 
} 
 
#trick div{ 
  position:absolute; 
  width:50px; 
  height:50px; 
  border:solid; 
  border-radius:50%; 
  border-bottom-left-radius:0; 
  transform:rotate(135deg) 
} 
 
@keyframes rot { 
  0%   {transform:rotate(0)} 
  100% {transform:rotate(360deg)} 
}
<div id="val"></div> 
<div id="trick"><div></div></div>

Answer 3

let rotate = getComputedStyle(document.querySelector('.trick')).transform; 
 
const angle = (i) => { 
  let arr = i.match(/-?\d+\.?\d+[^,]/gi); 
  let [cos, sin] = [arr[0], arr[1]]; 
 
  let 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; 
 
} 
 
console.log(angle(rotate))
.trick { 
  transform: rotate(45deg) 
}
<div class="trick"></div>

READ ALSO
Как показать что функция отсуствует потому что не имеет смысла, а не что ее забыли?

Как показать что функция отсуствует потому что не имеет смысла, а не что ее забыли?

В проекте есть семейство шаблонных функций которые принимают аргументы с некоторым ожидаемым интерфейсомПримерно так:

101
CLion не понимает библиотеку iostream

CLion не понимает библиотеку iostream

CLion не видит библиотеку iostream

114
Отладка qt приложения на другой машине

Отладка qt приложения на другой машине

Приложение разрабатывается на Windows машине для Linux'аМожно ли настроить Qt Creator так чтобы код писался на Windows машине, а разрабатываемое приложение...

91
Вывод даты слева от заголовка

Вывод даты слева от заголовка

Есть список новостей, хочу вывести дату слева от заголовка новости, но не знаю как

107