ちきちこちゃんねるITや経済、ゲームなどの情報をまとめた、息抜きできるメディアです。...スポンサーリンクこの記事を読むならこれも読もう。プログラミング2016/02/08313今までは、アプリやウェブサイトなどのローディング画面に、アニメーションgif画像を使っていました。CSS3のアニメーションを使えば動きもスムーズに、手軽に実装することができます。それ以外にも、CSSなので文字や画像、アイコンフォントなど様々な要素をクルクル回転させることができます。回転CSSclass="kuru"1class="kuru"というプロパティを付加します。rotate(360deg);}}上記のコードをスタイルシートに記述するだけで回転します。回転CSS3から新しく追加された、「animation」と「transform」を利用しています。アニメーションの処理は、「keyframes」という機能を利用しています。widthとheightを指定してあげないと回転が大きくなったりします。回転を速くしたい場合は、spinの1.5sの部分の数字を小さくすれば小さくするほど回転が早くなります。画像を回転アニメーション今度は画像を回転アニメーションするとどうなるかをやります。えびすをくるくるじゃあえびすを、えびす回転CSSclass="hage"1class="hage"プロパティを付加して回転させてみましょう。基本コードは先ほどと同じです。rotate(360deg);}}雑な切り抜きでポケモンのイシツブテみたいになっちゃった。画像でかすぎてすげー邪魔くさい。画像を回転させる場合は、widthもheightも画像によってすでに大きさが決まっているので記述する必要なしです。高速えびすでは、先ほど紹介した方法でえびすを高速に回してみましょう。いやー、良い笑顔ですねー。infinite;}このようにすればマウスをホバーしたときのみ、回転させることができます。このサイトのトップページの記事一覧の画像と、サイドバーの人気記事の画像がそうですね。CSS3での回転アニメーションなので、アイコンフォントも回せます。サイト上部のPR記事の★がそうですね。まとめCSS3最高ですね。gif画像を使ってアニメーションをさせているアプリやウェブサイトが多いので、ぜひCSS3で実装することをオススメします。何より楽ですし、つまらないサイトに動きをつけたり、ふざけたサイトを作るのに適しています。この記事を書いた人M.Nishi管理人ファッションが好きで、ライフスタイルなどの情報に強いです。夏はテニス、冬はスノーボードをするアクティブ系インドア人間。コメントをキャンセルメールアドレスが公開されることはありません。新しい投稿をメールで受け取る関連記事ブログ開設1ヶ月で月間1万PV達成?と私が行ったこと。【CSS3】文字や画像などの要素を回転アニメーションにする今までは、アプリやウェブサイトなどのローディング画面に、アニメーションgif画像を使っていました。...Stinger5をニュースサイト・マガジン風に3カラムにカスタマイズ!はじめまして!(@Nishi)です。Technologyさんの製品第2弾。私もかなりランニングをする人なので、今回はランニング用の安い、高音質のおすすめイヤホンをレビューしていきます。Technologyさんの大容量モバイルバッテリーを1ヶ月使用したので、レビューしていきます。...イギリス、オーストラリアの大学院留学の費用や難易度!準備はそれほど難しくない?海外大学院への留学を希望している方が年々増えています。...ブログ開始3ヶ月で2万PV達成と収益報告!【2015年7月運営】いつの間にか、ちきちこちゃんねるを運営してから3ヶ月経ったのでPVと収益報告をします。2ヶ月目の報告はすっかり忘れてしまいました。...マセラティのSUV、レヴァンテの価格や発売時期は?スペックまとめ!マセラティ初のSUVとなる、「レヴァンテ」が現在開発中となり、市販モデルとしての投入が数年以内にも行われる予定となっている。...ランボルギーニのSUV、ウルスの価格や発売時期は?スペックまとめ!ランボルギーニから正式に市販化されると発表のあったSUV、ウルスの価格や、発売時期、サイズなどのスペックをまとめてみました。...断線したiPhone5の充電ケーブルをハサミで修理、直す方法!断線して充電できなくなったiPhone5の充電ケーブルをハサミ1本で修理、直す方法を紹介します。「Web」カテゴリの人気記事Stinger5をニュースサイト・マガジン風に3カラムにカスタマイズ!初心者おすすめプログラミング学習サイトCODEPREPの評判とは?ブログ開始3ヶ月で2万PV達成と収益報告!【2015年7月運営】ブログ開設1ヶ月で月間1万PV達成?と私が行ったこと。人気!おすすめ千切りキャベツピーラーと貝印のピーラーを紹介!...522ビュースポンサーリンクこのサイトについて・広告の要望について・お問い合わせ・サイトマップメールマガジンメールアドレスを記入して購読すれば、更新をメールで受信できます。8人の購読者に加わりましょうメールアドレス【CSS3】文字や画像などの要素を回転アニメーションにするITや経済、ゲームなどの情報をまとめた、息抜きできるメディアです。