★CSS3リファレンス
transform …… 要素に2D変形、または、3D変形を適用する
広告
transformプロパティは、要素に2D変形、または、3D変形を適用する際に使用します。
transformプロパティの値に、用意されているtransform関数を指定することで、 要素にマトリクス変形、移動、縮尺、回転、傾斜などの変形を適用することができます。
transform関数をホワイトスペースで区切って複数指定することで、複数のtransform効果を適用することもできます。 この場合、最終的に要素に適用されるのは、それぞれのtransform関数の値を結合したものとなります。
指定できるtransform関数は以下の通りです。（2D変形についてはこちらのページで紹介しています。）
マトリクス変形
- matrix(数値, 数値, 数値, 数値, 数値, 数値)
-
matrix()関数では、6つの数値で2Dマトリクス変形を指定します。
マトリクスとは、行と列のことです。初期値はmatrix(1, 0, 0, 1, 0, 0)となります。
matrix(a, b, c, d, e, f) は、
matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, e, f, 0, 1)と同じです。
行列を使用した2D変形についてはこちら - matrix3d(数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値)
-
matrix3d()関数では、16個の数値（4x4の同次行列）で3Dマトリクス変形を指定します。
初期値はmatrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)となります。
行列を使用した3D変形についてはこちら
移動
- translate(X方向の距離, Y方向の距離)
- translate()関数では、X方向とY方向の距離で2D移動を指定します。 Y方向の距離は省略することができますが、この場合のY方向の距離は0となります。[tx, ty]
- translate3d(X方向の距離, Y方向の距離, Z方向の距離)
- translate3d()関数では、X方向とY方向とZ方向の距離で3D移動を指定します。 Y方向とZ方向の距離は省略することができますが、この場合のY方向とZ方向の距離は0となります。[tx,ty,tz]
- translateX(X方向の距離)
- translateX()関数では、X方向の距離で移動を指定します。
- translateY(Y方向の距離)
- translateY()関数では、Y方向の距離で移動を指定します。
- translateZ(Z方向の距離)
- translateZ()関数では、Z方向の距離で移動を指定します。 translateZ()関数にはパーセンテージ値を指定することができないので注意してください。 もし、パーセンテージで値を指定しても0と同じになります。
縮尺
- scale(数値, 数値)
- scale()関数では、2つの数値で2D縮尺比率を指定します。
1つ目の数値はX方向、2つ目の数値はY方向の比率です。
2つ目の数値は省略することができますが、この場合には最初の値と同じになります。[sx,sy]
- scale3d(数値, 数値, 数値)
- scale3d()関数では、3つの数値で3D縮尺比率を指定します。 1つ目の数値はX方向、2つ目の数値はY方向、3つ目の数値はZ方向の比率です。[sx,sy,sz]
- scaleX(数値)
- scaleX()関数では、X方向の縮尺比率を指定します。Y方向とZ方向の比率は1となります。[sx,1,1]
- scaleY(数値)
- scaleY()関数では、Y方向の縮尺比率を指定します。X方向とZ方向の比率は1となります。[1,sy,1]
- scaleZ(数値)
- scaleZ()関数では、Z方向の縮尺比率を指定します。X方向とY方向の比率は1となります。[1,1,sz]
回転
- rotate(回転角度)
- rotate()関数では、角度によって2D回転を指定します。 transform-originプロパティを同時に指定することで回転の中心を指定することができます。
- 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) - rotateX(回転角度)
- X軸を軸とする角度によって時計回りの回転を指定します。
- rotateY(回転角度)
- Y軸を軸とする角度によって時計回りの回転を指定します。
- rotateZ(回転角度)
- Z軸を軸とする角度によって時計回りの回転を指定します。
傾斜
- skewX(X軸の傾斜角度)
- skewX()関数では、角度によってX軸に沿った傾斜変形を指定します。
- skewY(Y軸の傾斜角度)
- skewY()関数では、角度によってY軸に沿った傾斜変形を指定します。
- skew(X軸の傾斜角度, Y軸の傾斜角度)
- skew()関数では、2つの角度によってX軸とY軸に沿った傾斜変形を指定します。 最初の角度はX軸の傾斜、2番目の角度はY軸の傾斜です。 2番目の角度は省略することができますが、この場合には0となりY軸は傾斜しません。
遠近効果
- perspective(数値)
- perspective()関数では、透視投影行列を指定します。 この行列は、視点を頂点として底面が視点から無限に遠ざかるピラミッドを想定して、そこに対象物となる立体を位置付けます。 perspective()関数のパラメータとして与えられる深度は、視点からz=0の平面までの距離を表します。 数値はピクセルで指定します。 数値を低くすると、ピラミッドがより平坦になって遠近感が強くなります。 例えば、1000を指定すると遠近感がゆるやかになり、200を指定すると遠近感が極端になります。 深度の値は0より大きくなくてはなりません。そうでなければ指定が無効となります。
■値
- none
- 要素に変形を適用しない（初期値）
- transform関数
- 要素に適用する変形をtransform関数で指定
■初期値・適用対象・値の継承
- 初期値
- none
- 適用対象
- ブロックレベル要素、インライン要素
- 値の継承
- しない
■使用例
CSSソースは外部ファイル（sample.css）に記述
p.sample1 img {transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.2);}p.sample2 img {transform: translate3d(50px,20px,10px);}
p.sample3 img {transform: translateX(50px);}
p.sample4 img {transform: translateY(20px);}
p.sample5 img {transform: translateZ(10px);}
p.sample6 img {transform: scale3d(0.5,0.5,0.5);}
p.sample7 img {transform: scaleX(0.5);}
p.sample8 img {transform: scaleY(0.5);}
p.sample9 img {transform: scaleZ(0.5);}
p.sample10 img {transform: rotate3d(1,0,0,180deg);}
p.sample11 img {transform: rotateX(180deg);}
p.sample12 img {transform: rotateY(180deg);}
p.sample13 img {transform: rotateZ(180deg);}
p.sample14 img {transform: perspective(200);}
p.sample1, p.sample2, p.sample3, p.sample4, p.sample5, p.sample6, p.sample7, p.sample8, p.sample9, p.sample10, p.sample11, p.sample12, p.sample13, p.sample14 {background-color:limegreen;}
HTMLソース
<html><head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample1">matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.2)<br><img src="../images/kaeru.gif"></p>
<p class="sample2">translate3d(50px,20px,10px)<br><img src="../images/kaeru.gif"></p>
<p class="sample3">translateX(50px)<br><img src="../images/kaeru.gif"></p>
<p class="sample4">translateY(20px)<br><img src="../images/kaeru.gif"></p>
<p class="sample5">translateZ(10px)<br><img src="../images/kaeru.gif"></p>
<p class="sample6">scale3d(0.5,0.5,0.5)<br><img src="../images/kaeru.gif"></p>
<p class="sample7">scaleX(0.5)<br><img src="../images/kaeru.gif"></p>
<p class="sample8">scaleY(0.5)<br><img src="../images/kaeru.gif"></p>
<p class="sample9">scaleZ(0.5)<br><img src="../images/kaeru.gif"></p>
<p class="sample10">rotate3d(1,0,0,180deg)<br><img src="../images/kaeru.gif"></p>
<p class="sample11">rotateX(180deg)<br><img src="../images/kaeru.gif"></p>
<p class="sample12">rotateY(180deg)<br><img src="../images/kaeru.gif"></p>
<p class="sample13">rotateZ(180deg)<br><img src="../images/kaeru.gif"></p>
<p class="sample14">perspective(200)<br><img src="../images/kaeru.gif"></p>
</body>
</html>
↓↓↓
ブラウザ上の表示
matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.2)
translate3d(50px,20px,10px)
translateX(50px)
translateY(20px)
translateZ(10px)
scale3d(0.5,0.5,0.5)
scaleX(0.5)
scaleY(0.5)
scaleZ(0.5)
rotate3d(1,0,0,180deg)
rotateX(180deg)
rotateY(180deg)
rotateZ(180deg)
perspective(200)
■ベンダープレフィックスを付けた場合の使用例
CSSソースは外部ファイル（sample.css）に記述
p.prefix_sample1 img {-moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.2);
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.2);
-o-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.2);
-ms-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.2);
}
p.prefix_sample2 img {
-moz-transform: translate3d(50px,20px,10px);
-webkit-transform: translate3d(50px,20px,10px);
-o-transform: translate3d(50px,20px,10px);
-ms-transform: translate3d(50px,20px,10px);
}
p.prefix_sample3 img {
-moz-transform: translateX(50px);
-webkit-transform: translateX(50px);
-o-transform: translateX(50px);
-ms-transform: translateX(50px);
}
p.prefix_sample4 img {
-moz-transform: translateY(20px);
-webkit-transform: translateY(20px);
-o-transform: translateY(20px);
-ms-transform: translateY(20px);
}
p.prefix_sample5 img {
-moz-transform: translateZ(10px);
-webkit-transform: translateZ(10px);
-o-transform: translateZ(10px);
-ms-transform: translateZ(10px);
}
p.prefix_sample6 img {
-moz-transform: scale3d(0.5,0.5,0.5);
-webkit-transform: scale3d(0.5,0.5,0.5);
-o-transform: scale3d(0.5,0.5,0.5);
-ms-transform: scale3d(0.5,0.5,0.5);
}
p.prefix_sample7 img {
-moz-transform: scaleX(0.5);
-webkit-transform: scaleX(0.5);
-o-transform: scaleX(0.5);
-ms-transform: scaleX(0.5);
}
p.prefix_sample8 img {
-moz-transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
-o-transform: scaleY(0.5);
-ms-transform: scaleY(0.5);
}
p.prefix_sample9 img {
-moz-transform: scaleZ(0.5);
-webkit-transform: scaleZ(0.5);
-o-transform: scaleZ(0.5);
-ms-transform: scaleZ(0.5);
}
p.prefix_sample10 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);
}
p.prefix_sample11 img {
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
}
p.prefix_sample12 img {
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
p.prefix_sample13 img {
-moz-transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
}
p.prefix_sample14 img {
-moz-transform: perspective(200);
-webkit-transform: perspective(200);
-o-transform: perspective(200);
-ms-transform: perspective(200);
}
p.prefix_sample1, p.prefix_sample2, p.prefix_sample3, p.prefix_sample4, p.prefix_sample5, p.prefix_sample6, p.prefix_sample7, p.prefix_sample8, p.prefix_sample9, p.prefix_sample10, p.prefix_sample11, p.prefix_sample12, p.prefix_sample13, p.prefix_sample14 {background-color:limegreen;}
HTMLソース
<html><head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="prefix_sample1">matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.2)<br><img src="../images/kaeru.gif"></p>
<p class="prefix_sample2">translate3d(50px,20px,10px)<br><img src="../images/kaeru.gif"></p>
<p class="prefix_sample3">translateX(50px)<br><img src="../images/kaeru.gif"></p>
<p class="prefix_sample4">translateY(20px)<br><img src="../images/kaeru.gif"></p>
<p class="prefix_sample5">translateZ(10px)<br><img src="../images/kaeru.gif"></p>
<p class="prefix_sample6">scale3d(0.5,0.5,0.5)<br><img src="../images/kaeru.gif"></p>
<p class="prefix_sample7">scaleX(0.5)<br><img src="../images/kaeru.gif"></p>
<p class="prefix_sample8">scaleY(0.5)<br><img src="../images/kaeru.gif"></p>
<p class="prefix_sample9">scaleZ(0.5)<br><img src="../images/kaeru.gif"></p>
<p class="prefix_sample10">rotate3d(1,0,0,180deg)<br><img src="../images/kaeru.gif"></p>
<p class="prefix_sample11">rotateX(180deg)<br><img src="../images/kaeru.gif"></p>
<p class="prefix_sample12">rotateY(180deg)<br><img src="../images/kaeru.gif"></p>
<p class="prefix_sample13">rotateZ(180deg)<br><img src="../images/kaeru.gif"></p>
<p class="prefix_sample14">perspective(200)<br><img src="../images/kaeru.gif"></p>
</body>
</html>
↓↓↓
ブラウザ上の表示
matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.2)
translate3d(50px,20px,10px)
translateX(50px)
translateY(20px)
translateZ(10px)
scale3d(0.5,0.5,0.5)
scaleX(0.5)
scaleY(0.5)
scaleZ(0.5)
rotate3d(1,0,0,180deg)
rotateX(180deg)
rotateY(180deg)
rotateZ(180deg)
perspective(200)
■ベンダープレフィックスを付けた場合の使用例（動きをつけたもの）
CSSソースは外部ファイル（sample.css）に記述
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);
}
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;
}
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】
© HTMQ