ホバーした時に回転させる方法

2017/06/22

画像などにホバーした時、回転させるにはtransformプロパティを利用します。その他諸々、回転を綺麗に見せるために調整しなければいけません。

サンプルコード

ホバー時に90度回転させる例です。

div:hover .target {
	transform: rotateZ( 90deg ) ;
}

デモ

Z軸

Z軸を基軸とした回転をする例です。コンテナとなる要素(.container)で囲まないと上手く回転しません。2箇所あるrotateZの部分を、rotateX(水平方向)、またはrotateY(垂直方向)にすることで回転方法を変更できます。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
		.container {
			width: 100px ;
			height: 100px ;
			line-height: 100px ;
			text-align: center ;
		}

		.target {
			transition: .5s ;
			transform: rotateZ( 0deg ) ;
		}

		.container:hover .target {
			transform: rotateZ( 360deg ) ;
		}
	</style>
</head>
<body>
<!-- テキスト -->
<div class="container">
	<p class="target">SYNCER</p>
</div>

<!-- 画像 -->
<p class="container">
	<img src="/icon.svg" class="target">
</p>
</body>
</html>

X軸

X軸を基軸とした回転をする例です。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
		.container {
			width: 100px ;
			height: 100px ;
			line-height: 100px ;
			text-align: center ;
		}

		.target {
			transition: .5s ;
			transform: rotateX( 0deg ) ;
		}

		.container:hover .target {
			transform: rotateX( 360deg ) ;
		}
	</style>
</head>
<body>
<!-- テキスト -->
<div class="container">
	<p class="target">SYNCER</p>
</div>

<!-- 画像 -->
<p class="container">
	<img src="/icon.svg" class="target">
</p>
</body>
</html>

Y軸

Y軸を基軸とした回転をする例です。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
		.container {
			width: 100px ;
			height: 100px ;
			line-height: 100px ;
			text-align: center ;
		}

		.target {
			transition: .5s ;
			transform: rotateY( 0deg ) ;
		}

		.container:hover .target {
			transform: rotateY( 360deg ) ;
		}
	</style>
</head>
<body>
<!-- テキスト -->
<div class="container">
	<p class="target">SYNCER</p>
</div>

<!-- 画像 -->
<p class="container">
	<img src="/icon.svg" class="target">
</p>
</body>
</html>