トップページ  > CSS3  > transform  > transform:rotate()

★CSS3リファレンス

transform:rotate() …… 要素を回転表示する
transform:rotateX()
transform:rotateY()
transform:rotateZ()
transform:rotate3d()
Firefox3.5(-moz-)Firefox4(-moz-) Google Chrome1(-webkit-)Google Chrome2(-webkit-)Google Chrome3(-webkit-)Google Chrome4(-webkit-)Google Chrome5(-webkit-)Google Chrome6(-webkit-) Safari4(-webkit-)Safari5(-webkit-)
広告

transformプロパティのrotate()、rotateX()、rotateY()、rotateZ()、rotate3d()は、要素を回転表示する際に使用します。 transform-originプロパティを同時に指定することで、回転の中心を指定することができます。

■値

rotate(回転角度)
rotate()関数では、角度によって2D回転を指定します。
rotateX(回転角度)
X軸を軸とする角度によって時計回りの回転を指定します。
rotateY(回転角度)
Y軸を軸とする角度によって時計回りの回転を指定します。
rotateZ(回転角度)
Z軸を軸とする角度によって時計回りの回転を指定します。
rotate3d(数値, 数値, 数値, 回転角度)
rotate3d()関数では、 最初の3つの数値で[x,y,z]の方向ベクトルを決め、最後に指定する回転角度で時計回りの3D回転を指定します。 もし、方向ベクトルが単位長さとなっていない場合には正規化されます。 方向ベクトルが正規化できない数値の場合には、回転が適用されません。 rotate3d関数による指定は、matrix3d()関数で以下の指定をしたのと同じになるとこのことです。
matrix3d(1 + (1-cos(angle))*(x*x-1), -z*sin(angle)+(1-cos(angle))*x*y, y*sin(angle)+(1-cos(angle))*x*z, 0, z*sin(angle)+(1-cos(angle))*x*y, 1 + (1-cos(angle))*(y*y-1), -x*sin(angle)+(1-cos(angle))*y*z, 0, -y*sin(angle)+(1-cos(angle))*x*z, x*sin(angle)+(1-cos(angle))*y*z, 1 + (1-cos(angle))*(z*z-1), 0, 0, 0, 0, 1)

■初期値・適用対象・値の継承

初期値
none
適用対象
ブロックレベル要素、インライン要素
値の継承
しない

■使用例

CSSソースは外部ファイル(sample.css)に記述

p.sample1, p.sample2, p.sample3, p.sample4, p.sample5 {background-color:limegreen;}
p.sample1 img {transform: rotate(-45deg);}
p.sample2 img {transform: rotateX(180deg);}
p.sample3 img {transform: rotateY(180deg);}
p.sample4 img {transform: rotateZ(180deg);}
p.sample5 img {transform: rotate3d(1,0,0,180deg);}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>

<p class="sample1">
rotate(-45deg)<br>
<img src="../images/kaeru.gif">
</p>

<p class="sample2">
rotateX(180deg)<br>
<img src="../images/kaeru.gif">
</p>

<p class="sample3">
rotateY(180deg)<br>
<img src="../images/kaeru.gif">
</p>

<p class="sample4">
rotateZ(180deg)<br>
<img src="../images/kaeru.gif">
</p>

<p class="sample5">
rotate3d(1,0,0,180deg)<br>
<img src="../images/kaeru.gif">
</p>

</body>
</html>
↓↓↓

ブラウザ上の表示

rotate(-45deg)

rotateX(180deg)

rotateY(180deg)

rotateZ(180deg)

rotate3d(1,0,0,180deg)

■ベンダープレフィックスを付けた場合の使用例

CSSソースは外部ファイル(sample.css)に記述

p.prefix_sample1, p.prefix_sample2, p.prefix_sample3, p.prefix_sample4, p.prefix_sample5 {background-color:limegreen;}
p.prefix_sample1 img {
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}
p.prefix_sample2 img {
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
}
p.prefix_sample3 img {
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
p.prefix_sample4 img {
-moz-transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
}
p.prefix_sample5 img {
-moz-transform: rotate3d(1,0,0,180deg);
-webkit-transform: rotate3d(1,0,0,180deg);
-o-transform: rotate3d(1,0,0,180deg);
-ms-transform: rotate3d(1,0,0,180deg);
}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>

<p class="prefix_sample1">
rotate(-45deg)<br>
<img src="../images/kaeru.gif">
</p>

<p class="prefix_sample2">
rotateX(180deg)<br>
<img src="../images/kaeru.gif">
</p>

<p class="prefix_sample3">
rotateY(180deg)<br>
<img src="../images/kaeru.gif">
</p>

<p class="prefix_sample4">
rotateZ(180deg)<br>
<img src="../images/kaeru.gif">
</p>

<p class="prefix_sample5">
rotate3d(1,0,0,180deg)<br>
<img src="../images/kaeru.gif">
</p>

</body>
</html>
↓↓↓

ブラウザ上の表示

rotate(-45deg)

rotateX(180deg)

rotateY(180deg)

rotateZ(180deg)

rotate3d(1,0,0,180deg)


以下のサンプルでは、 rotateX()、rotateY()、rotateZ()の回転方向を理解しやすくするために、 transformプロパティを transitionプロパティと組み合わせて要素を動的に回転させています。 :hover擬似クラスを使用して、要素にマウスを乗せるとX軸、Y軸、Z軸を軸にして回転するように指定しています。

■ベンダープレフィックスを付けた場合の使用例(動きをつけたもの)

CSSソースは外部ファイル(sample.css)に記述

p.prefix_sample101, p.prefix_sample102, p.prefix_sample103 {
background-color:yellowgreen;
-moz-transition: -moz-transform 1s linear;
-webkit-transition: -webkit-transform 1s linear;
-o-transition: -o-transform 1s linear;
-ms-transition: -ms-transform 1s linear;
}
p.prefix_sample101:hover {
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
}
p.prefix_sample102:hover {
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
p.prefix_sample103:hover {
-moz-transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>

<p class="prefix_sample101">
マウスを乗せると、X軸を軸にして180度回転します。<br>
rotateX(180deg)<br>
<img src="../images/kaeru.gif">
</p>

<p class="prefix_sample102">
マウスを乗せると、Y軸を軸にして180度回転します。<br>
rotateY(180deg)<br>
<img src="../images/kaeru.gif">
</p>

<p class="prefix_sample103">
マウスを乗せると、Z軸を軸にして180度回転します。<br>
rotateZ(180deg)<br>
<img src="../images/kaeru.gif">
</p>

</body>
</html>
↓↓↓

ブラウザ上の表示

マウスを乗せると、X軸を軸にして180度回転します。
rotateX(180deg)

マウスを乗せると、Y軸を軸にして180度回転します。
rotateY(180deg)

マウスを乗せると、Z軸を軸にして180度回転します。
rotateZ(180deg)

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ