Jquery - 이미지를 중심점을 중심으로 회전시킵니다.

8 개의 아이콘이 중심점을 중심으로 회전하는 애니메이션을 만들려고합니다. CSS 회전 애니메이션을 만들었지 만 이미지가 거꾸로되고 위로 향하지 않기 때문에 원하는 부분이 아닙니다. 이미지보기 enter image description here Jquery - 이미지를 중심점을 중심으로 회전시킵니다.

아이콘이 중심점을 중심으로 회전하지만 위쪽을 향하게하는 방법을 찾아야합니다. 누구나 할 수있는 방법이나 플러그인을 수행하는 방법을 알고 있습니까?

미리 도움을 주셔서 감사합니다. Denis

출처

2013-11-28 denislexic

changearray를 실행뿐만 아니라 간단한 작업이 될 것이다 탐색 클릭을 추가? –

이것은 정확하게 당신이 찾고있는 것일 수 있습니다 : http://stackoverflow.com/questions/14057780/prevent-an-element-to-rotate-itself-in-a-circular-css3-animation?answertab=active# 탭 탑 – bouscher

은 내가 만든 정확히 몇 달 전에

트릭은 큰 원과 반대 방향으로 작은 원 (이미지 자체)를 회전하는 클라이언트 (비록 순수 자바 스크립트() 각 경로)

또한 큰 원을 따라 위치를 지정하고 변경하려면 data-angle이라는 속성을 사용하십시오. <div class="circle one" data-angle=270>1</div>

var circleArray = document.getElementsByClassName("circle"); 
var angle = 0; 

chargearray(); 

function chargearray() { 
    for (var i = 0, j = circleArray.length; i < j; i++) { 
     var circle = circleArray[i]; 
     var circleAngle = parseInt (circle.dataset.angle); 
     var totalAngle = angle + circleAngle 
     var style = "rotate(" + totalAngle + "deg) translate(200px)"; 
     totalAngle = - totalAngle; 
     style = style + " rotate(" + totalAngle + "deg)" 
     circle.style.webkitTransform = style; 
     circle.style.Transform = style; 
    } 
} 

document.onkeydown = function (e) { 
    e = e || window.event; 
    switch(e.which || e.keyCode) { 
     case 37: 
      angle = angle + 30; 
      chargearray(); 
      break; 
     case 39: 
      angle = angle - 30; 
      chargearray(); 
      break; 
    } 
}

Here is the production version

Here is a more basic version of it

Here is an absolute bare-bones version

최종 제품에 네비게이션에 내장의 주요 형태는 질문에 대답 할 수있는 버튼이지만, 사용자는 왼쪽을 사용하여 탐색하거나 수 오른쪽 화살표 (기본 버전의 작동 방식).

단순히 당신이 할 요소의 정도에 angle를 변경하고이에 대한 jsFiddle을 준비 할 수

출처

2013-11-28 16:21:45

각도를 0.0에서 2 * PI로 애니메이션 한 다음 각도에 따라 아이콘의 위치를 계산할 수 있습니다.

var x = dist * cos(angle); 
var y = dist * sin(angle);

출처

2013-11-28 16:16:08

Jquery - 이미지를 중심점을 중심으로 회전시킵니다.

답변

관련 문제