마우스, 기기 모션으로 360˚ 회전

var target = document.querySelector("#media-progress-icon");

// 대상의 중심점 구하기
var center = {
    x: target.getBoundingClientRect().left + (target.clientWidth / 2),
    y: target.getBoundingClientRect().top + (target.clientHeight / 2)
}

window.addEventListener('resize', function () {
    center = {
        x: target.getBoundingClientRect().left + (target.clientWidth / 2),
        y: target.getBoundingClientRect().top + (target.clientHeight / 2)
    }
})

// PC 마우스 이동 이벤트
function handleMouseMove(e) {
    var x = center.x - e.clientX;
    var y = center.y - e.clientY;

    var radian = Math.atan2(y, x);
    var degree = (radian * 180 / Math.PI).toFixed(0) - 90;
    target.classList.remove('animation')
    target.style.transform = 'rotate(' + degree + 'deg)';
}

// Mobile 기기 모션 이벤트
function handleOrientation(event) {
    if (!event.beta) {
        window.addEventListener("mousemove", handleMouseMove);
    }
    // 도를 라디안으로 변환
    var alphaRad = event.alpha * (Math.PI / 180);
    var betaRad = event.beta * (Math.PI / 180);
    var gammaRad = event.gamma * (Math.PI / 180);

    // 방정식 구성 요소 계산
    var cA = Math.cos(alphaRad);
    var sA = Math.sin(alphaRad);
    var cB = Math.cos(betaRad);
    var sB = Math.sin(betaRad);
    var cG = Math.cos(gammaRad);
    var sG = Math.sin(gammaRad);

    // A, B, C 회전 구성 요소 계산
    var rA = -cA * sG - sA * sB * cG;
    var rB = -sA * sG + cA * sB * cG;
    var rC = -cB * cG;

    // 나침반 방향 계산
    var compassHeading = Math.atan(rA / rB);

    // 반원에서 전체원으로 변환
    if (rB < 0) {
        compassHeading += Math.PI;
    } else if (rA < 0) {
        compassHeading += 2 * Math.PI;
    }

    // 라디안을 각도로 변환
    degree = (compassHeading * 180 / Math.PI).toFixed(0) - 135;

    target.classList.remove('animation')
    target.style.transform = 'rotate(' + degree + 'deg)';

}

window.addEventListener("deviceorientation", handleOrientation);