2015.10.23　【更新日 : 2023.11.02】

【css】マウスオーバーで要素を回転させる

Category：: css
Tags：: css, css3, transition, アニメーション, 回転

要素をcssのtransformで回転させるサンプルです。
cssでアニメーションさせるにはtransitionを使います。

HTML

<div class="text-box">
	<p class="text">マウスオーバー</p>
</div>

回転の度合いはrotate(90deg)の部分で変更可能です。

CSS

.text-box {
	background: #fff;
	padding: 15px;
	width: 200px;
}
.text:hover:after {
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
.text {
	position: relative;
	color: red;
}
.text:after {
	content: "＞";
	display: block;
	position: absolute;
	top: 50%;
	right: 20px;
	margin: -10px 0 0 0;
	-moz-transition: -moz-transform 0.3s;
	-o-transition: -o-transform 0.3s;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

sass / compass

.text-box {
	background: #fff;
	padding: 15px;
	width: 200px;
}
.text {
	position: relative;
	color: red;
	&:after {
		content: "＞";
		display: block;
		position: absolute;
		top: 50%;
		right: 20px;
		margin: -10px 0 0 0;
		@include transition(transform 0.3s);
	}
	&:hover {
		&:after {
			@include transform(rotate(90deg));
		}
	}
}

参考リンク