HOME > CSS > マウスホバーで画像を回転させる

  • 投稿日： 最終更新日：
  • タグ：
  • カテゴリー： CSS

マウスホバーで画像を回転させる

CSS3のtransitionプロパティとtransformプロパティを使う方法

transitionプロパティとtransformプロパティを使って画像を回転させます。transformで画像を一回転させるだけだと変化が見えないので、transitionで動きが見えるようにしています。

実装

<div class="rotateImg">
<img src="../images/image01s.jpg" alt="" />
</div>

.rotateImg img{
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}
.rotateImg img:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}

サンプル

transitionだとマウスが離れると画像がまた回転するのが難点。ホバーした時に回転して、あとはそのまま動かないでほしい。

参考サイト

jQuery「jQueryRotate.js」を使う方法

マウスホバーで画像がくるっと回転する。こちらもマウスが離れるとまた回転してしまうんだなぁ。

実装

<div class="rotateImg02">
<img src="../images/image01s.jpg" alt="" />
</div>

$(function(){
	$(".rotateImg02 img").rotate({ 
	bind: 
		{ 
			mouseover : function() { 
				$(this).rotate({
					animateTo: 360
				})
			},
			mouseout : function() { 
				$(this).rotate({
					animateTo: 0
				})
			}
		} 	 
	});
	
});

サンプル

参考サイト