CSS3では簡単に画像やオブジェクトを回転させることができます。
アイキャッチにはなりますが、多用すると目が疲れるので使うところは考えましょう。
まずは単純にページを描画後に回転させておくサンプルです。
CSSで要素と回転の記述を書きます。
<style> .demo_stage{ background-color:blue; width:100px; height:100px; margin:10px; } .spin_item { animation: demo_spin 1.5s linear infinite; } @keyframes demo_spin { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } </style>
今回はSVGを使って書いた矢印を回します。
<div class="demo_stage"> <div class="spin_item" width="100" height="100"> <svg width="100" height="100"> <path d="M50 0 L100 50 L80 50 L80 100 L20 100 L20 50 L0 50 Z" style="fill:#FFF"/> </svg> </div> </div>
次は逆回転です。
違いはスタートを0からに360を変え、ゴールを0にするだけ。
CSSコードサンプルはこちら
@keyframes demo_spin2 { 0% {transform: rotate(360deg);} 100% {transform: rotate(0deg);} }
最後にjQueryと区に合わせて、クリックしたら回り出すサンプルです。
JSはクリックしたらClassをつけ外しするシンプルなもの。
<script> $(document).ready(function(){ $(".demo_item").click(function(){ $(this).toggleClass("spin_item3"); }); }); </script>
CSSとHTMLはほぼ同じです。
<style> .spin_item3 { animation: demo_spin3 1.5s linear infinite; } @keyframes demo_spin3 { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } </style>
回転の命令が書かれたclassをつけ外ししています。
<div class="demo_stage"> <div class="demo_item" width="100" height="100"> <svg width="100" height="100"> <path d="M50 0 L100 50 L80 50 L80 100 L20 100 L20 50 L0 50 Z" style="fill:#FFF"/> </svg> </div> </div>