JavaScripthttps://blog.emwai.jp/javascript/transform-rotate/スポンサードリンク回転のアニメーションを実現するだけのシンプルなjQueryプラグインもあるようですが、それだけのためにプラグイン読み込むのもイマイチなので、もっと簡単にCSSのtransitionを使って回転させます。動かないコードが載っていたので削除して加筆修正しました。jQueryのanimate()では、アニメーションさせるCSSのプロパティにtransformやショートハンドのような、ピクセルにうまく変換できない値を指定してもうまく動作しません。);animate()で対処するならオプション(第二引数)で、フレームごとに呼び出されるstepメソッドに回転アニメーションを行うコールバックを自前するのがてっとり早いかと思います。}});コールバックの第一引数には、アニメーションする値の増減に合わせて0から1までの数値が渡されてきます。半分のタイミングで0.5になります。CSSのtransitionを使うanimate()ではstepを呼び出すためのrotate以外のアニメーションが必要なため、transformを使える環境を想定するのであれば、アニメーションにはまずtransitionを使う方が適切ではないかと考えます。}transitionは、transition-property、transition-duration、transition-timing-function、transition-delayの値をショートハンドで一括指定できるプロパティです。transition-propertyトランジションの対象となるプロパティを指定します。alltransition-durationトランジションのスピードを指定します。0stransition-timing-functionトランジションのイージングを指定します。easetransition-delayトランジションの遅延を指定します。0s各プロパティの値を複数指定するにはカンマ区切りを使いますが、ショートハンドで試したところうまく動作しませんでした。Drafttransitionを使えばJavaScript(jQuery)側は随分とラクです。例では、ある程度スクロールされたら回転用のクラス名を追加するだけです。CSSの方は、実際にはブラウザの対応状況に合わせてベンダープレフィックス付きのプロパティも同時に指定した方がいいかもしれません。コメントをキャンセルメールアドレスが公開されることはありません。このブログについてご覧いただきありがとうございます。このブログは、高知県でウェブデザイン・印刷物のデザイン制作を行っているフリーランス、森田秀章のブログです。