日別アーカイブ: 2014年8月17日

CSS：CSSで要素を回転させる方法「transform:rotate()」

Posted on by
2

CSSの「transform:rotate()」を使用するとテキストや画像、指定した要素を
回転させて表示することができます。

transform: rotate(10deg);

rotate()には回転する角度を指定します。

下記のように「-」マイナスで指定することも可能です。
その場合は逆方向に回転して表示されます。

transform: rotate(-10deg);

要素を回転させて文字や画像を傾けて表示させたい場合などに利用できそうです。

下記にCSSの「transform:rotate()」を使用して、要素を回転させて表示した時の方法を記載します。

■ 「transform:rotate()」の使用方法

【CSS】

?
1
2
3
4
5
6
7
8
9
<style type="text/css">
div#rotate {
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
</style>

【HTML】

?
1
2
3
<div id="rotate">
test
</div>

【表示例】

css_transform_rotate_1

「transition」プロパティを使用すれば、hoverした時にアニメーションで回転させることも可能です。

■ hover時にアニメーションで回転させる場合

【CSS】

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style type="text/css">
div#rotate {
    color:#FFF;
    background-color:#09F;
    width: 200px;
    padding:20px;
    -moz-transition: -moz-transform 1s linear;
    -webkit-transition: -webkit-transform 1s linear;
    -o-transition: -o-transform 1s linear;
    -ms-transition: -ms-transform 1s linear;
    transition: transform 1s linear;
}
div#rotate:hover {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
</style>

【HTML】

?
1
2
3
<div id="rotate">
test
</div>

【表示例】

サンプルページ

他にも「rotateX()」「rotateY()」「rotateZ()」「rotate3d()」で
指定することもできます。

要素を傾けて表示させたり、hoverした時に要素を回転させたりなど、
サイトに動きが出せて面白いかもしれないです。