Mouse Effect 05 - 이미지 효과 2

{
   const circle = document.querySelector(".cursor").getBoundingClientRect();

         function mouseMove(e) {

            //마우스 좌표값
            let mousePageX = e.pageX
            let mousePageY = e.pageY

            //마우스 좌표 기준점을 가운데로 변경
            let centerPageX = window.innerWidth/2 - mousePageX;         //전체 width값에서 - 마우스 좌표값 
            let centerPageY = window.innerHeight/2 - mousePageY;

            //최소값-50  최대값-50 설정
            let maxPageX = Math.max(-800, Math.min(800, centerPageX))     //-800이하 800이상은 안넘어감
            let maxPageY =  Math.max(-300, Math.min(300, centerPageY))

            //각도 줄이는 설정
            let anlexpageX = maxPageX * 0.12;
            let anlexpageY = maxPageY * 0.12;

            //움직임이 부드럽게 설정 마우스 값이 10~30까지 한번에 가는게 아니라 10~30까지 1개씩 +해줌
            let softPageX = 0, softPageY = 0;
            softPageX += (anlexpageX - softPageX) * 0.3;
            softPageY += (anlexpageY - softPageY) * 0.3;

          

            //이미지 움직이기
            // transform:rotateX(0deg) rotateY(0deg);  
            const imgMove = document.querySelector(".mouse__img");
            imgMove.style.transform = "perspective(600px)  rotateX("+softPageY+"deg) rotateY("+-softPageX+"deg)"


            //원크기
            let circleWidth = mousePageX-circle.width/2;
            let circleHeight = mousePageY-circle.height/2;
            //커서 //원크기를 저장해서 커서에 적용
            gsap.to(".cursor", {duration: .0, left: circleWidth, top: circleHeight})

            //마우스 좌표값 화면에 출력  
            document.querySelector(".mousePageX").textContent = mousePageX
            document.querySelector(".mousePageY").textContent = mousePageY
            document.querySelector(".centerPageX").textContent = centerPageX
            document.querySelector(".centerPageY").textContent = centerPageY
            document.querySelector(".maxPageX").textContent = maxPageX
            document.querySelector(".maxPageY").textContent = maxPageY
        }

        document.addEventListener("mousemove", mouseMove);
}