1

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

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

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

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

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

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

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

2

3 ответа 3

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>

1

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>

0
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";

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.