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>
