2015.10.23

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

Category: css

Tags, , , ,

サンプル

マウスオーバー

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

html

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

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));
}
}
}

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

参考リンク

Category : css