javascript - CSS と Javascript の回転は onclick で一度だけ機能しますか?

Question

onclickこれを使用してdivイベントを回転させています:

function ghum(){
    document.getElementById("earth").className += " rotate";
}

これは反時計回りに回転します。

function revghum(){
    document.getElementById("earth").className += " revrotate";
}

しかし、それは一度動作します。もう 1 つの問題は、最初のイベントの前に 2 番目のイベントをクリックすると、最初のイベントが自動的に機能しなくなることです。

実際には、クリックするたびにこのdivを回転させたいと思っています。ここに例があります http://maatren.com/earth/

回転と回転では、変換と遷移のみを使用して div を回転させ、id Earth では、変換と遷移を使用せずに背景画像を使用しています。

Answer 1

Your class="rotate revrotaterotate revrotaterotate revrotaterotate revrotate"

Answer 2

「addClass」と「removeClass」で jQuery を使用できますが、「className +=」でクラス名を追加し続けることはできません。

API addClass: http://api.jquery.com/addClass/

API removeClass: http://api.jquery.com/removeClass/