이미지를 회전하지 않고 원형 모션으로 이미지를 이동하는 방법은 무엇입니까?

Question

html5, css3 및 javascript를 사용하여 웹 페이지를 만들었습니다 ... 내 웹 페이지에서 비디오가 순환되는 방식없이 5 개의 이미지가 순환 방식으로 비디오 주위를 돌아 다니는 페이지 중심에서 재생됩니다 ... 내가 어떻게 이걸 얻을 수 있니?

cos(image_angle) = x/radius 
sin(image_angle) = y/radius 

을 :

   y 
       | 
       |  [image] 
       | /
       | /
       |/radius 
       |/
    __________|/_)_image_angle___________ x 
       | 
       | 
       | 

기본 삼각법이 우리에게주는 : 난 초보자 해요 ... pls는

Answer 1

그냥 이미지를 계산 사전에 thnx ... 나 좀 도와 것은 기본 삼각법을 이용하여 좌표 그러므로

x = cos(image_angle)/radius 
y = sin(image_angle)/radius 

간단히 CSS 좌표를 변경하여 이미지를 움직이게하십시오.

var img = document.getElementById('image1'); 
var radius = 200; // in pixels 
var imgAngle = 0; 

function animateImg() { 
    img.style.left = cos(imgAngle)/radius; 
    img.style.top = sin(imgAngle)/radius; 

    imgAngle = imgAngle + 0.1; 

    setTimeout(animateImg,50); 
} 

animateImg(); 

다섯에 대한 이미지는 단지 2 * PI에 의해 각 이미지/5 오프셋 : 그래서 하나 개의 이미지에 대한이 같은해야 물론

function animageImages() { 
    // Assuming image elements are stored in an array, I'm 
    // using the array length to infer the number of images: 

    var offsetAngle = 2 * Math.PI/images.length; 

    for (var i=0; i<images.length; i++) { 
     var img = images[i]; 
     img.style.left = cos(imgAngle+offsetAngle*i)/radius; 
     img.style.top = sin(imgAngle+offsetAngle*i)/radius; 
    } 

    imgAngle = imgAngle + 0.1; 

    setTimeout(animateImages,50); 
} 

을, 모든 위의 예는 왼쪽 상단 주위 애니메이션 페이지의 코너 (좌표 0,0). 비디오의 좌표를 중심으로 계산을 다시 계산해야합니다. 또한 CSS에 익숙하지 않은 경우 이미지의 스타일을 display:block 및 position:absolute (또는 상대적)으로 설정해야 작동 할 수 있습니다.