jqueryまたはcssでアニメーションを回転

Question

私は回転ホイールの運のゲームを作成したいと思います。 jqueryにはfadein、fadeoutなどのいくつかの機能があることがわかります。jqueryにも回転効果があるのか​​どうか疑問に思っていましたか？もしそうでなければ、どうすればこの効果を得ることができますか？ ありがとう

Answer 1

これを行うにはいくつかの方法があります。これを行う最も簡単な方法はCSSです。構文は非常に簡単です。

-webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg);

アニメーションが滑らかにするために、あなたはトランジションのスタイルを追加する必要があります、覚えておいてください：あなたはjQueryの経由でこれを行うことができ、あるいは

-webkit-transition:transform 0.25s ease-out 0s; -ms-transition:transform 0.25s ease-out 0s; transition:transform 0.25s ease-out 0s;

を（これはjQueryをコピーして貼り付けられますこの美しい答えから：https://stackoverflow.com/a/17348698/6049581）

var rotation = 0; 

jQuery.fn.rotate = function(degrees) { 
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)', 
       '-moz-transform' : 'rotate('+ degrees +'deg)', 
       '-ms-transform' : 'rotate('+ degrees +'deg)', 
       'transform' : 'rotate('+ degrees +'deg)'}); 
    return $(this); 
}; 

$('.rotate').click(function() { 
    rotation += 5; 
    $(this).rotate(rotation); 
}); 

jQuery ro外部要因を見て回転量を変更する必要がある場合は、uteを少し良くしてください。

Answer 2

私は参考のためにひっそりとしたフィドルを作成しました。あなたはおそらく、これに似た何かを必要とするかもしれません。

次のスタイルを使用して

使用アニメーション：

#wheel-container img{ 
height: 300px; 
width: 300px; 
padding: 30px; 
} 
.spin-wheel { 
animation: spin 0.5s infinite; 
} 

@keyframes spin { 
0%: { 
    transform: rotate(60deg); 
} 

25% { 
    transform: rotate(120deg); 
} 

50% { 
    transform: rotate(180deg); 
} 

75% { 
    transform: rotate(270deg); 
} 
100% { 
    transform: rotate(360deg); 
} 
} 

https://jsfiddle.net/L8jpgL4v/23/