transform プロパティ リファレンス
transform プロパティ 説明
transform プロパティの値に、transform 関数を指定して transform プロパティを使用すると、 要素の拡大 ・ 縮小、移動、回転、傾斜、マトリクス変形など、要素を
2D ・ 3D変形して表示できます
transform 関数をスペースで区切って複数指定すると、複数の transform効果を適用することもでき、その場合、それぞれの transform
関数の値を結合した値が最終的に要素に適用されます
transform プロパティ 値
| 値 |
意味 |
| none |
要素に変形を適用しない （初期値） |
| transform 関数 |
要素に適用する変形をtransform関数で指定します |
transform プロパティ 適用対象 値の継承 初期値
| 項目 |
内容 |
| 初期値 |
none |
| 適用対象 |
ブロックレベル要素、インライン要素 |
| 値の継承 |
しない |
transform-origin プロパティ 2D ・ 3D変形の支点を指定する
transform プロパティで表示を変形させる際の支点は、デフォルトでは対象要素の中心点になっています
transform-originプロパティは、要素に 2D ・ 3D変形を適用するときの変形の支点を指定する際に使用します
値は 1つ、または、スペースで区切って 2つ指定します
値を 1つだけ指定すると、2番目の値は centerとみなされます
値を 2つ指定すると、両方がキーワード値である場合を除いて、最初の値は水平方向、2番目の値は垂直方向の値となります
値をパーセンテージや長さで指定する場合、2D変形では変形前の要素の左上位置（0,0）から右下方向への距離（ローカル座標システム）で指定します
3D変形では変形前の要素の左上位置（0,0,0）から右下方向への距離（ローカル座標システム）で指定します
値には負のパーセンテージや負の長さを指定することもできます
transform-origin プロパティ 値
| 値 |
意味 |
| パーセンテージ |
変形を適用する要素の左上位置 (0%,0%)からのパーセンテージ
3Dの場合には Z軸方向の長さを指定 （初期値は 50% 50% 0） |
| 長さ |
変形を適用する要素の左上位置 (0,0)からの長さを指定
3D変形では左上位置 (0,0,0)からの長さを指定 |
| キーワード |
水平方向は left ／ center ／ right
垂直方向は top ／ center ／ bottom
3Dの場合にはZ軸方向の長さを指定 |
transform-origin プロパティ 適用対象 値の継承 初期値
| 項目 |
内容 |
| 初期値 |
2D変形では50% 50%、3D変形では50% 50% 0 |
| 適用対象 |
ブロックレベル要素、インライン要素 |
| 値の継承 |
しない |
transform-origin プロパティ 記述例
| 記述例 |
| CSS |
<style type="text/css">
<!--
.cl_transform-origin_left-top{
-moz-transform-origin:left top;
-webkit-transform-origin:left top;
-ms-transform-origin:left top;
-o-transform-origin:left top;
transform-origin:left top;
}
-->
</style> |
外部スタイルシートファイルに定義する場合、下記は、不要です
<style type="text/css">
<!--
-->
</style>
|
transform 関数 scale 要素を拡大 ・ 縮小表示する
transformプロパティの scale()、scaleX()、scaleY()、scaleZ()、scale3d()は、要素を拡大、または、縮小表示する際に使用します
transform 関数 scale 値
| 値 |
意味 |
| scale(数値, 数値) |
scale()関数では、2つの数値で2D縮尺比率を指定します
1つ目の数値はX方向、2つ目の数値はY方向の比率です
2つ目の数値は省略することができますが、この場合には最初の値と同じになります |
| scaleX(数値) |
scaleX()関数では、X方向の縮尺比率を指定します
Y方向とZ方向の比率は1となります |
| scaleY(数値) |
scaleY()関数では、Y方向の縮尺比率を指定します
X方向とZ方向の比率は1となります |
| scaleZ(数値) |
scaleZ()関数では、Z方向の縮尺比率を指定します
X方向とY方向の比率は1となります |
| scale3d(数値, 数値, 数値) |
scale3d()関数では、3つの数値で3D縮尺比率を指定します
1つ目の数値はX方向、2つ目の数値はY方向、3つ目の数値はZ方向の比率です |
transform 関数 scale 適用対象 値の継承 初期値
| 項目 |
内容 |
| 初期値 |
none |
| 適用対象 |
ブロックレベル要素、インライン要素 |
| 値の継承 |
しない |
transform 関数 scale 使用例
| 記述例 |
| CSS |
<style type="text/css">
<!--
.cl_transform_scale_0050{
-moz-transform:scale(0.5,0.5);
-webkit-transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
-o-transform:scale(0.5,0.5);
transform:scale(0.5,0.5);
}
.cl_transform_scale_0100{
-moz-transform:scale(1.0,1.0);
-webkit-transform:scale(1.0,1.0);
-ms-transform:scale(1.0,1.0);
-o-transform:scale(1.0,1.0);
transform:scale(1.0,1.0);
}
.cl_transform_scale_0200{
-moz-transform:scale(2.0,2.0);
-webkit-transform:scale(2.0,2.0);
-ms-transform:scale(2.0,2.0);
-o-transform:scale(2.0,2.0);
transform:scale(2.0,2.0);
}
-->
</style> |
外部スタイルシートファイルに定義する場合、下記は、不要です
<style type="text/css">
<!--
-->
</style> |
主要ブラウザの
ベンダープレフィックス |
| -moz- |
Firefox |
| -webkit- |
Google Chrome、Safari |
| -ms- |
Internet Explorer |
| -o- |
Opera |
|
-moz- とか -webkit- とか付けているのは、ベンダープレフィックスです
ベンダープレフィックス（接頭辞）とは、ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のことです
transform プロパティ は CSS3で採用される予定の新しい機能、ブラウザによって意図通りに表示されないことを防止する為付けています |
| HTML1 |
<img class="cl_transform-origin_left-top cl_transform_scale_0050"
src="img/HP_HTML_000001.gif" width="52" height="60"
border="0" alt="きつね"> |
| HTML2 |
<img class="cl_transform-origin_left-top cl_transform_scale_0100"
src="img/HP_HTML_000001.gif" width="52" height="60"
border="0" alt="きつね"> |
| HTML3 |
<img class="cl_transform-origin_left-top cl_transform_scale_0200"
src="img/HP_HTML_000001.gif" width="52" height="60"
border="0" alt="きつね"> |
|
| 表示例 |
|
HTML1 |
HTML2 |
HTML3 |
 |
|
|
| 注． |
transform プロパティ は、画像そのものを拡大 ・ 縮小しているわけではなく、表示上の見え方だけを調整するプロパティですので、HTML3ではテーブルの枠からはみ出して表示されています （この例では右下方向に拡大表示） |
transform 関数 translate 要素の表示位置を移動させる
transformプロパティのtranslate ()、translateX()、translateY()、translateZ()、translate3d()は、要素の表示位置を移動させる際に使用します
transform 関数 translate 値
| 値 |
意味 |
| translate(X方向の距離, Y方向の距離) |
translate()関数では、X方向とY方向の距離で2D移動を指定します
Y方向の距離は省略することができますが、この場合のY方向の距離は0となります |
| translateX(X方向の距離) |
translateX()関数では、X方向の距離で移動を指定します |
| translateY(Y方向の距離) |
translateY()関数では、Y方向の距離で移動を指定します |
| translateZ(Z方向の距離) |
translateZ()関数では、Z方向の距離で移動を指定します
translateZ()関数にはパーセンテージ値を指定することができないので注意してください
もし、パーセンテージで値を指定しても0と同じになります |
| translate3d(X方向の距離, Y方向の距離, Z方向の距離) |
translate3d()関数では、X方向とY方向とZ方向の距離で3D移動を指定します
Y方向とZ方向の距離は省略することができますが、この場合のY方向とZ方向の距離は0となります |
transform 関数 translate 適用対象 値の継承 初期値
| 項目 |
内容 |
| 初期値 |
none |
| 適用対象 |
ブロックレベル要素、インライン要素 |
| 値の継承 |
しない |
transform 関数 rotate 要素を回転表示する
transformプロパティのrotate()、rotateX()、rotateY()、rotateZ()、rotate3d()は、要素を回転表示する際に使用します
transform-originプロパティを同時に指定することで、回転の中心を指定することができます
transform 関数 rotate 値
| 値 |
意味 |
| rotate(回転角度) |
rotate()関数では、角度によって2D回転を指定します |
| rotateX(回転角度) |
X軸を軸とする角度によって時計回りの回転を指定します |
| rotateY(回転角度) |
Y軸を軸とする角度によって時計回りの回転を指定します |
| rotateZ(回転角度) |
Z軸を軸とする角度によって時計回りの回転を指定します |
| rotate3d(数値, 数値, 数値, 回転角度) |
rotate3d()関数では、 最初の3つの数値で[x,y,z]の方向ベクトルを決め、最後に指定する回転角度で時計回りの3D回転を指定します
もし、方向ベクトルが単位長さとなっていない場合には正規化されます
方向ベクトルが正規化できない数値の場合には、回転が適用されません |
transform 関数 rotate 適用対象 値の継承 初期値
| 項目 |
内容 |
| 初期値 |
none |
| 適用対象 |
ブロックレベル要素、インライン要素 |
| 値の継承 |
しない |
transform 関数 skew 要素を傾斜変形させる
transformプロパティのskewX()、skewY()、skew()は、要素を傾斜変形させる際に使用します
transform 関数 skew 値
| 値 |
意味 |
| skewX(X軸の傾斜角度) |
skewX()関数では、角度によってX軸に沿った傾斜変形を指定します |
| skewY(Y軸の傾斜角度) |
skewY()関数では、角度によってY軸に沿った傾斜変形を指定します |
| skew(X軸の傾斜角度, Y軸の傾斜角度) |
skew()関数では、2つの角度によってX軸とY軸に沿った傾斜変形を指定します
最初の角度はX軸の傾斜、2番目の角度はY軸の傾斜です
2番目の角度は省略することができますが、この場合には0となりY軸は傾斜しません |
transform 関数 skew 適用対象 値の継承 初期値
| 項目 |
内容 |
| 初期値 |
none |
| 適用対象 |
ブロックレベル要素、インライン要素 |
| 値の継承 |
しない |
transform 関数 matrix 行列を使用して要素に2D変形を適用する
transformプロパティのmatrix()関数は、要素に2D変形を適用する際に使用します
マトリクスとは行列のことで、matrix()関数では行列を使用して2D変形を指定します
変形の内容は6個の数値で指定します
基準となる値は、matrix(1, 0, 0, 1, 0, 0)で、この場合には座標は変化しません
尚、3Dマトリクス変形を適用する場合には、 transformプロパティのmatrix3d()関数を使用します
matrix(a, b, c, d, e, f) は、 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0,
e, f, 0, 1)と同じです
transform 関数 matrix 値
| 値 |
意味 |
| matrix(数値, 数値, 数値, 数値, 数値, 数値) |
6個の数値で2D変形を指定します
matrix(1, 0, 0, 1, 0, 0)を指定すると、座標は変化しません
※メモ：matrix()関数の6つの数値についてGoogle Chromeで表示を確認したところ、以下のように対応しているようです
1番目の数値は、水平方向の縮尺（a）
2番目の数値は、垂直方向の傾斜率（b）
3番目の数値は、水平方向の傾斜率（c）
4番目の数値は、垂直方向の縮尺（d）
5番目の数値は、水平方向の移動距離（e）
6番目の数値は、垂直方向の移動距離（f） |
transform 関数 matrix 適用対象 値の継承 初期値
| 項目 |
内容 |
| 初期値 |
none |
| 適用対象 |
ブロックレベル要素、インライン要素 |
| 値の継承 |
しない |
transform 関数 matrix3d 行列を使用して要素に3D変形を適用する
transformプロパティのmatrix3d()関数は、要素に3D変形を適用する際に使用します
マトリクスとは行列のことで、matrix3d()関数では行列を使用して3D変形を指定します
変形の内容は16個の数値で指定します
基準となる値は、matrix(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 )で、この場合には座標は変化しません
指定すべき数値が16個もあると複雑に感じますが、以下のように4×4に分けて考えると理解しやすいでしょう
16個の数値とはつまり、4x4の行列を指定していることに他なりません
transform 関数 matrix3d 値
| 値 |
意味 |
| matrix3d(数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値) |
16個の数値（4x4の行列）で3D変形を指定します
matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)を指定すると、座標は変化しません |
transform 関数 matrix3d 適用対象 値の継承 初期値
| 項目 |
内容 |
| 初期値 |
none |
| 適用対象 |
ブロックレベル要素、インライン要素 |
| 値の継承 |
しない |
transform 関数 perspective 3D変形の奥行きの深さを指定する
transformプロパティのperspective()は、3D変形の遠近効果を調節する際に使用します
奥行きの深さは数値で指定します
transform:perspective(数値) の指定は、 基本的にはperspectiveプロパティによる指定と同じです
transform 関数 perspective 値
| 値 |
意味 |
| perspective(数値) |
perspective()関数では、透視投影行列を指定します
この行列は、視点を頂点として底面が視点から無限に遠ざかるピラミッドを想定して、そこに対象物となる立体を位置付けます
perspective()関数のパラメータとして与えられる深度は、視点からz=0の平面までの距離を表します
数値はピクセルで指定します
数値を低くすると、ピラミッドがより平坦になって遠近感が強くなります
例えば、1000を指定すると遠近感がゆるやかになり、200を指定すると遠近感が極端になります
深度の値は0より大きくなくてはなりません
0以下を指定すると無効となります |
transform 関数 perspective 適用対象 値の継承 初期値
| 項目 |
内容 |
| 初期値 |
none |
| 適用対象 |
ブロックレベル要素、インライン要素 |
| 値の継承 |
しない |
|