Задача такова есть div блок
<div class="trick"></div>
в разные моменты времени - его вращает другой скрипт на определенный угол мне надо получить в переменную на какой угол в данный момент повернуть этот блок
пробовал получить вот так
console.log($('.trick').css('transform'));
выдает значения такие matrix(1, 0, 0, 1, 0, 0)
но я к сожалению не могу получить из матрицы свойства transform именно поворот, как это сделать? rotate
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";
Здесь можно почитать подробнее детально>>>
Атрибут 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>
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>
Виртуальный выделенный сервер (VDS) становится отличным выбором
В проекте есть семейство шаблонных функций которые принимают аргументы с некоторым ожидаемым интерфейсомПримерно так:
Приложение разрабатывается на Windows машине для Linux'аМожно ли настроить Qt Creator так чтобы код писался на Windows машине, а разрабатываемое приложение...
Есть список новостей, хочу вывести дату слева от заголовка новости, но не знаю как