css3 애니메이션이 한 번만 발생합니다.

Question

나는 그것을 클릭 할 때마다 자바 스크립트/css3을 통해 회전하는 상자를 만들려고합니다. 작동하지만, 처음 클릭 할 때만 작동합니다. 이후에는 자바 스크립트 오류가 아니라 자바 스크립트 오류가 아니라는 경고가 표시됩니다. 내가 회전() 다시 360를 회전 할 수 있도록 시작 단계로 돌아가 그것을 말할 수 후 둘 필요가 무언가있을 필요가 생각

<script> 
    function rotate(box) 
    { 
    alert('start'); 
    box.style.webkitTransform = 'rotate(360deg)'; 
    } 
</script> 

<style> 
#box{ height:100px; width:100px; border:1px solid red; -webkit-transition: -webkit-transform 1s ease-out; } 
</style> 

<div id='box' onclick='rotate(this);'></div> 

- 여기

내 간단한 페이지입니다 .

Answer 1

이전에 만든 스크립트를 다시 사용합니다. 이제는 Mozilla도 지원해야합니다.

<!-- head part --> 
<script type="text/javascript"> 
var angle = 0; //Current rotation angle 
var nbSteps = 30; //More steps is more fluid 
var speed = 1000; //Time to make one rotation (ms) 
var count = 0; //Count the nb of movement (0..nbSteps-1) 
var element = null; 

/** 
* Rotate the element passed 
*/ 
function rotate(box) { 
    if(count == 0) { 
     element = box; 
     rotateLoop(); 
    } 
} 

/** 
* Recursive method that rotate step by step 
*/ 
function rotateLoop() { 
    angle-=360/nbSteps; 

    setElementAngle(angle); 
    count++; 

    if(count < nbSteps) { 
     setTimeout("rotateLoop()",speed/nbSteps); 
    } 
    else { 
     count=0; 
     setElementAngle(0); //Just to be sure 
    } 
} 

/** 
* Use for the rotation 
*/ 
function setElementAngle(angle) { 
    var rotationStyle = "rotate(" + (360-angle) + "deg)"; 
    element.style.WebkitTransform = rotationStyle; 
    element.style.MozTransform = rotationStyle; 
    element.style.OTransform = rotationStyle; 
} 
</script> 

<style> 
#box{ 
    height:100px; 
    width:100px; 
    border:1px solid red; 
    } 
</style> 

<!-- body part --> 
<div id='box' onclick="rotate(this);"></div> 

Answer 2

편집 : 당신이 완전히 CSS되고 싶은 가정 :

웹킷 전환은 현재 테스트와 매우 거칠다되고있다. 특히 당신이하고 싶은 것을 위해. 이것들은 "변형"이고 스타일 문자열은 매우 복잡하기 때문에 불쾌한 도전이됩니다.

<script> 
function rotate(box) 
{ 
    box.style.webkitTransform = box.style.webkitTransform == "rotate(360deg)" ? "rotate(0deg)" : "rotate(360deg)"; 
} 
</script> 

<style> 
#box{ height:100px; width:100px; border:1px solid red; -webkit-transition: -webkit-transform 1s ease-out; } 
</style> 

<div id='box' onclick='rotate(this);'></div> 

또는 위험한 코딩을 많이, 또는 자바 스크립트 대안 다루는 알면 있습니다

가장 좋은 것은 회전마다 다른 클릭을 반대로 할 수 있습니다.