뷰포트보다 큰 mousemove의 요소를 회전하십시오.

Question

mousemove에서 요소를 회전하는 데 문제가 있습니다. 나는이 문제가 내 요소가 화면 (CSS에서 vh/vw 단위로 설정)보다 훨씬 크지 만 본질적으로 요소 소리가 mousemove의 중심에서 회전한다는 사실과 관련이 있다고 생각합니다.

나는 여기에 jsFiddle을 설정 한 :

https://jsfiddle.net/cLx290p1/

function themeLanding() { 
    var graphic = $('.landing-2016'); 
    if (graphic.length > 0) { 
     var offset = graphic.offset(); 
     function mouse(evt) { 
      var centerX = (offset.left) + (graphic.width()/2), 
      centerY = (offset.top) + (graphic.height()/2), 
      mouseX = evt.pageX, 
      mouseY = evt.pageY, 
      radians = Math.atan2(mouseX - centerX, mouseY - centerY); 
      degree = (radians * (180/Math.PI) * -1) + 90; 
      graphic.css('-moz-transform', 'rotate(' + degree + 'deg) translate(-50%,-50%)'); 
      graphic.css('-webkit-transform', 'rotate(' + degree + 'deg) translate(-50%,-50%)'); 
      graphic.css('-o-transform', 'rotate(' + degree + 'deg) translate(-50%,-50%)'); 
      graphic.css('-ms-transform', 'rotate(' + degree + 'deg) translate(-50%,-50%)'); 
      graphic.css('transform', 'rotate(' + degree + 'deg) translate(-50%,-50%)'); 
     } 
     $(document).mousemove(mouse); 
    } 
} 
themeLanding(); 

는 또한, 디버깅 체크 등의 MouseMove 이벤트없이, 같은 생각을 신청 한 CSS3를 사용하여 동일한 요소를 회전 할 수 있습니다.

https://jsfiddle.net/psywr840/1/

이것은 내가 잘못 가고 어디 잘 그래서 난 확신 해요 작동하는 것 같다.

아이디어가 있으십니까? 감사.

Answer 1

css transform 함수를 사용할 때 함수는 왼쪽에서 오른쪽 순으로 처리됩니다.

귀하의 경우, 원하는 것은 먼저 translate 요소와 THEN rotate입니다. 예를 들어,이 answer on SO은 비슷한 것을 설명합니다. 회전 대신 크기를 사용하지만 원리는 같습니다. 내가 너무이 알아 낸

graphic.css('-moz-transform', 'translate(-50%,-50%) rotate(' + degree + 'deg)'); 
graphic.css('-webkit-transform', 'translate(-50%,-50%) rotate(' + degree + 'deg)'); 
graphic.css('-o-transform', 'translate(-50%,-50%) rotate(' + degree + 'deg)'); 
graphic.css('-ms-transform', 'translate(-50%,-50%) rotate(' + degree + 'deg)'); 
graphic.css('transform', 'translate(-50%,-50%) rotate(' + degree + 'deg)');