[javaScript]스크롤 이벤트 element 회전

=> body에는 box라는 class명을 가진 element 하나만을 두고 스크롤을 내릴 때마다 회전시키기

style

        *{
            margin: 0;
            padding: 0;
        }

        body{
            height: 400vh;
        }

        .box{
            width: 300px;
            height: 300px;
            background-color: aquamarine;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

script

        const boxEl = document.querySelector('.box');

        const handleScroll = () => {
            const pageY = window.pageYOffset;
            boxEl.style.transform = `translate(-50%, -50%) rotate(${pageY}deg)`
        };

        window.addEventListener('scroll', handleScroll);

=> translate로 element의 위치를 중앙으로 잡아주었기 때문에 위 코드처럼 rotate를 그 뒤로 이어서 사용하였음