풍속에 반응하는 회전 함수

Question

javascript 플래시 또는 css에서 함수를 찾아야합니다. 풍차의 이미지를 여러 가지 다른 속도로 회전시켜 줄 것입니다. 이 속도는 실제 풍속으로 변해야합니다.

Answer 1

CSS 전환으로 쉽게이를 수행 할 수 있습니다. 나는 당신에게 당신을 시작하게하는 약간의 팁을 줄 것이다.

this 문서를 읽으십시오. 그리고 here is a quick demo (웹킷 전용).

.windmill{ 
    -webkit-animation-name: spin;  
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear;  
} 

:

는 spin를 호출, 당신에게 애니메이션을 정의하여 시작, 애니메이션, 반복, 타이밍 기능을 적용 풍차 이미지,

@-webkit-keyframes spin { 
    from { -webkit-transform: rotate(0deg); } 
    to { -webkit-transform: rotate(360deg); } 
} 

그리고 0 ~ 360 ℃, :로 이동

그런 다음 (당신이이 이미지 크기를 기준으로 계산해야합니다 , 풍속 공식) 당신의 속도를 정의

012 32,342,

이제 풍속 변경 사항을 적용하기 위해 자바 스크립트를 사용

$('.windmill').addClass('mph-10'); // stats spinning at 10 mph