transform:rotateX()
transform:rotateY()
transform:rotateZ()
transform:rotate3d()
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=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
<p class=”sample2″>
rotateX(180deg)<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
<p class=”sample3″>
rotateY(180deg)<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
<p class=”sample4″>
rotateZ(180deg)<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
<p class=”sample5″>
rotate3d(1,0,0,180deg)<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/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=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
<p class=”prefix_sample2″>
rotateX(180deg)<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
<p class=”prefix_sample3″>
rotateY(180deg)<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
<p class=”prefix_sample4″>
rotateZ(180deg)<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
<p class=”prefix_sample5″>
rotate3d(1,0,0,180deg)<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/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=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
<p class=”prefix_sample102″>
マウスを乗せると、Y軸を軸にして180度回転します。<br>
rotateY(180deg)<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
<p class=”prefix_sample103″>
マウスを乗せると、Z軸を軸にして180度回転します。<br>
rotateZ(180deg)<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
</body>
</html>
ブラウザ上の表示
マウスを乗せると、X軸を軸にして180度回転します。
rotateX(180deg)
マウスを乗せると、Y軸を軸にして180度回転します。
rotateY(180deg)
マウスを乗せると、Z軸を軸にして180度回転します。
rotateZ(180deg)