CSS変換は常に360度を超えずに時計回りに回転します

Question

JSとCSSの組み合わせを使用してスムーズなアニメーションを作成し、アナログ時計で秒、分、時を対応する度に変換する：

function clock() { 
    var t = moment(), 
     s = t.seconds() * 6, 
     a = t.minutes() * 6, 
     o = t.hours() % 12/12 * 360 + (a/12); 

    $(".hour").css("transform", "rotate(" + o + "deg)"); 
    $(".minute").css("transform", "rotate(" + a + "deg)"); 
    $(".second").css("transform", "rotate(" + s + "deg)"); 
} 

setInterval(clock, 1000); 

問題は、CSSは手が望ましくない効果を作る反時計回りに回します、私は変数は永遠に増え続けるしたくない360度になった後、私は0に戻り、再び起動し、ですが、 。

Example

私は0に360から移動して、再びそれを置くことを約イム、これは解決策になるかもしれ際JSを使用して移行プロパティの削除について考えていたが、存在する場合、私は疑問に思いますよりクリーンな方法。

Answer 1

ネイティブではできません。 356度から2度への移行は常に反時計回りになります。 356度から2度までの目盛りが気にならない場合は、トランジションを削除してください。しかし、それを行う理由はありません。 rotateが360度以上の値をとることができるという事実を利用してみてください。 0に戻すのではなく、クロックを "endlessly"（jsの最高のint値は9007199254740991なので、数百万年後にリフレッシュする必要があります。そして、あなたがどこか前の反復からのすべての値を格納し、現在の値を比較したい

var counter = { 
    s: 0, 
    a: 0, 
    o: 0 
}; 

var previous = null; 

：

次のようなのsetIntervalコールバック外の独立したcounter対象に、これまでの回転を追跡することができます以前のもの。必要に応じて、適切なカウンターを1つ増やします。

if(previous){ 
    if(s < previous.s){ 
    counter.s += 1; 
    } 
    if(a < previous.a){ 
    counter.a += 1; 
    } 
    if(o < previous.o){ 
    counter.o += 1; 
    } 
} 

previous = { 
    s: s, 
    a: a, 
    o: o 
}; 

次に、インラインCSSに逓倍度の値を設定します。あなたは何かのためにそれらを必要とする場合は、sなどの純粋な値にアクセスすることができますこのように。

$(".second").css("transform", "rotate(" + (s + 360 * counter.s) + "deg)"); 

の作業フィドル：https://jsfiddle.net/dannyjolie/tccroo1q/6/