JQuery를 이용하여 기울어져 있는 요소에 원하는 각도만큼 회전시키는 애니메이션에 관한 예제로 다음 과정을 통해 진행됩니다.
1. 현재 각도 구하기
2. 현재 각도를 이용하여 회전 애니메이션 주기
1. 현재 각도 구하기
- css의 transform 속성의 정보를 가져오면 matrix로 나옵니다. 따라서 우리가 원하는 각도를 구하기 위해서는 복잡한 과정을 거쳐야하는데 다른 개발자가 작성한 코드를 활용면 됩니다.[출처 링크1]
2. 현재 각도를 이용하여 회전 애니메이션 주기
- JQuery의 animate()는 속성 값이 숫자가 아닌 속성들의 애니메이션을 줄 수없습니다. [출처링크2] 그래서 animate()의 step을 이용하여 애니메이션을 줘야합니다.
예제 코드와 결과는 다음과 같습니다.
See the Pen JQUERY ANIMNATE USING TRANSFORM by st8324 (@st8324) on CodePen.
질문은 댓글로 남겨세요. 도움이 되셨다면 광고 클릭!