サーチ…
構文
- 回転変換
- transform：rotate（<angle>）
- 変換を変換する
- transform：translate（<length-or-percentage> [、<length-or-percentage>]？）
- transform：translateX（<length-or-percentage>）
- transform：translateY（<length-or-percentage>）
- スキュー変換
- transform：スキュー（<angle> [、<angle>]？）
- transform：skewX（<angle>）
- transform：skewY（<angle>）
- スケール変換
- transform：scale（<scale-factor> [、<scale-factor>]？）
- transform：scaleX（<scale-factor>）
- transform：scaleY（<scale-factor>）
- 行列変換
- transform：行列（<number> [、<number>] {5,5}）
パラメーター
| 関数/パラメータ | 詳細 |
|---|---|
rotate(x) | 要素をZ軸上の固定小数点の周りに移動する変換を定義します |
translate(x,y) | X軸とY軸の要素の位置を移動します。 |
translateX(x) | X軸上の要素の位置を移動します。 |
translateY(y) | Y軸上の要素の位置を移動します。 |
scale(x,y) | X軸とY軸の要素のサイズを変更します。 |
scaleX(x) | X軸上の要素のサイズを変更します。 |
scaleY(y) | Y軸上の要素のサイズを変更します。 |
skew(x,y) | せん断写像または移流、要素の各点を各方向に一定の角度だけ歪ませる |
skewX(x) | 要素の各点を水平方向にある角度だけ歪ませる水平剪断マッピング |
skewY(y) | 要素の各点を垂直方向にある角度だけ歪ませる垂直剪断写像 |
matrix() | 変換行列の形で2D変換を定義します。 |
| 角度 | 要素を回転または傾斜させる角度（使用する関数によって異なる）。角度は、度（ deg ）、勾配（ grad ）、ラジアン（ rad ）またはターン（ turn ）で提供できます。 skew()関数では、第2の角度はオプションです。指定されていない場合は、Y軸にスキュー（0）がありません。 |
| 長さまたはパーセンテージ | 要素が翻訳されるべき長さまたはパーセンテージとして表される距離。 translate()関数では、2番目のlength-or-percentageはオプションです。指定されていない場合、Y軸には（0）の平行移動はありません。 |
| スケールファクタ | 要素が指定された軸で何回スケールされるべきかを定義する数値。 scale()関数では、2番目の倍率はオプションです。指定されていない場合は、Y軸にも最初のスケールファクタが適用されます。 |
備考
2Dコーディエンティシステム
変換は、2D X / Y座標系に従って行われます。次の図に示すように、X軸は右から左に移動し、Y軸は下に移動します。
したがって、正のtranslateY()は下向きになり、正のtranslateX()は右に進みます。
ブラウザサポートとプレフィックス
- IEは、
-ms-接頭辞付きのIE9以降、このプロパティをサポートして-ms-ます。古いバージョンとEdgeではプレフィックスは必要ありません - Firefoxはバージョン3.5以降をサポートしており、バージョン15までは
-moz-接頭辞が必要です - バージョン4以降のChrome、バージョン34までは
-webkit-プレフィックスが必要-webkit- - Safariはバージョン8まで
-webkit-接頭辞が必要です - Operaはバージョン11.5では
-webkit-接頭辞、バージョン15から22では-o-接頭辞が必要です - Androidはバージョン2.1から4.4.4の
-webkit-接頭辞が必要です
接頭辞付き変換の例：
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
回転する
HTML
<div class="rotate"></div>
CSS
.rotate {
width: 100px;
height: 100px;
background: teal;
transform: rotate(45deg);
}
この例ではdivを時計回りに45度回転します。回転の中心は、DIVの中心にある50%左からと50%上から。 transform-originプロパティを設定すると、回転中心を変更できます。
transform-origin: 100% 50%;
上の例では、回転中心を右端の中央に設定します。
規模
HTML
<div class="scale"></div>
CSS
.scale {
width: 100px;
height: 100px;
background: teal;
transform: scale(0.5, 1.3);
}
この例では、divをX軸で100px * 0.5 = 50px 、Y軸で100px * 1.3 = 130pxします。
変換の中心は、div要素の中心にある50%左からと50%上から。
翻訳
HTML
<div class="translate"></div>
CSS
.translate {
width: 100px;
height: 100px;
background: teal;
transform: translate(200px, 50%);
}
この例では、divをX軸で200px、Y軸で100px * 50% = 50pxします。
1つの軸に翻訳を指定することもできます。
X軸の場合：
.translate {
transform: translateX(200px);
}
Y軸上で：
.translate {
transform: translateY(50%);
}
ゆがみ
HTML
<div class="skew"></div>
CSS
.skew {
width: 100px;
height: 100px;
background: teal;
transform: skew(20deg, -30deg);
}
この例では、divをX軸で20度、Y軸で-30度傾斜させます。
変換の中心は、div要素の中心にある50%左からと50%上から。
複数の変換
次のように、1つのプロパティ内の要素に複数の変換を適用できます。
transform: rotate(15deg) translateX(200px);
要素を時計回りに15度回転させ、次に200ピクセル右に平行移動します。
連鎖変換では、座標系は要素とともに移動します 。つまり、平行移動は水平ではなく、軸上で次の図のように時計回りに15度回転します。
変換の順序を変更すると、出力が変更されます。最初の例は、
transform: translateX(200px) rotate(15deg);
<div class="transform"></div>
.transform {
transform: rotate(15deg) translateX(200px);
}
この画像に示すように：
変換元
変換は、 transform-originプロパティによって定義された点に関して行われます。
このプロパティは2つの値をとります： transform-origin: XY;
次の例では、最初のdiv（ .tl ）は、 transform-origin: 0 0;左上隅を中心に回転しtransform-origin: 0 0; 2番目の（ .tr ）は変換transform-origin: 100% 0右上隅にtransform-origin: 100% 0 。 ホバー上でローテーションが適用されます ：
HTML：
<div class="transform originl"></div>
<div class="transform origin2"></div>
CSS：
.transform {
display: inline-block;
width: 200px;
height: 100px;
background: teal;
transition: transform 1s;
}
.origin1 {
transform-origin: 0 0;
}
.origin2 {
transform-origin: 100% 0;
}
.transform:hover {
transform: rotate(30deg);
}
変換元プロパティのデフォルト値は、要素の中心である50% 50%です。