CSSは5つの一般的な2D変換を実装します

CSS の 2D 変換を使用すると、移動、回転、拡大縮小、変形などの基本的な変換操作を 2 次元空間で実行できます。変換された要素は絶対配置された要素に似ており、周囲の要素には影響しませんが、周囲の要素と重なることができます。違いは、変換された要素がページ内の変換前のスペースを引き続き占有することです。

2D 変換は、CSS の transform プロパティと次の変換関数を使用して実現できます。

matrix(): 6 つの値 (a、b、c、d、e、f) を含む変換行列の形式で 2D 変換を指定します。これは、[a、b、c、d、e、f] の変換行列を直接適用することと同じです。
translate(): オブジェクトを X 軸と Y 軸に沿って移動します。この関数には 1 ～ 2 個のパラメータが必要です。最初のパラメータは X 軸に対応し、2 番目のパラメータは Y 軸に対応します。2 番目のパラメータが指定されていない場合、デフォルト値は 0 です。
translatex(): オブジェクトを X 軸に沿って (水平に) 移動します。
translatey(): オブジェクトを Y 軸 (垂直方向) に沿って移動します。
rotate(): 指定されたオブジェクトを回転します。回転角度は関数パラメータで指定できます。
scale(): オブジェクトを拡大縮小します。この関数には 1 ～ 2 個のパラメータが必要です。最初のパラメータは X 軸に対応し、2 番目のパラメータは Y 軸に対応します。2 番目のパラメータが指定されていない場合は、最初のパラメータの値がデフォルトで使用されます。
scalex(): オブジェクトを拡大縮小します（要素の幅を変更します）。
scaley(): オブジェクトを拡大縮小します（要素の高さを変更します）。
skew(): オブジェクトを X 軸と Y 軸に沿って傾けたり歪ませたりします。この関数には 1 ～ 2 個のパラメータが必要です。最初のパラメータは X 軸に対応し、2 番目のパラメータは Y 軸に対応します。 2 番目の引数が指定されていない場合、デフォルト値は 0 になります。
skewx(): オブジェクトを X 軸に沿って (水平に) 歪ませます。
skewy(): オブジェクトを Y 軸 (垂直方向) に沿って歪ませます。

1. 翻訳()

translate() 関数は、指定されたパラメータに従って要素を水平方向 (X 軸) または垂直方向 (Y 軸) に移動するために使用されます。関数の構文は次のとおりです。

翻訳(tx, ty)

ここで、tx は要素が水平 (X 軸) 方向に移動する距離に対応し、ty は要素が垂直 (Y 軸) 方向に移動する距離に対応します。パラメータ ty は無視することができ (デフォルトは 0)、両方のパラメータを負の値にすることができます。

[例] translate() 関数を使用して、指定した要素を移動します。

<!DOCTYPE html>
<html>
<ヘッド>
    <スタイル>
        div {
            幅: 100ピクセル;
            高さ: 100px;
            背景色: #CCC;
            変換: translate(100px, 10px);
        }
    </スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

実行結果は下の図に示されています。

図: translate() 関数のデモンストレーション

要素を水平方向または垂直方向に移動したいだけの場合は、translateX() (要素を水平方向に移動) または translateY() (要素を垂直方向に移動) を使用することもできます。translateX() 関数と translateY() 関数はどちらも、1 つのパラメータのみを指定する必要があります。例:

translateX(100px); /* translate(100px, 0px); と同等 */
translateY(10px); /* translate(0px, 10px); と同等 */

2. 回転()

rotate() 関数は、要素を指定された角度で回転させるために使用されます。関数の構文は次のとおりです。

回転する(a)

パラメータ a は、要素を回転する角度を示します。a が正の値の場合は時計回りの回転を示し、a が負の値の場合は反時計回りの回転を示します。

[例] rotate() 関数を使用して要素を回転します。

<!DOCTYPE html>
<html>
<ヘッド>
    <スタイル>
        div {
            幅: 100ピクセル;
            高さ: 100px;
            背景色: #CCC;
            マージン: 20px 0px 0px 20px;
            変換: 回転(45度);
        }
    </スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

実行結果は下の図に示されています。

図: rotate() 関数のデモンストレーション

3. スケール()

scale() 関数は、指定された要素を拡大または縮小するために使用されます。関数の構文形式は次のとおりです。

スケール(sx, sy)

ここで、sx は水平スケーリング比を表し、sy は垂直スケーリング比を表します。さらに、パラメータ sy は省略可能で、そのデフォルト値は sx と等しくなります。

[例] 指定された要素を拡大縮小するには、scale() 関数を使用します。

<!DOCTYPE html>
<html>
<ヘッド>
    <スタイル>
        div {
            幅: 100ピクセル;
            高さ: 100px;
            背景色: #CCC;
            変換: スケール(0.7);
        }
    </スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

実行結果は下の図に示されています。

図: scale() 関数のデモンストレーション

ヒント: scale() で指定されたパラメータ値が -1 ～ 1 の範囲外の場合、要素は拡大されます。パラメータ値が -1 ～ 1 の範囲内の場合、要素は縮小されます。

translate() 関数と同様に、要素のサイズを水平方向のみ、または垂直方向のみに拡大縮小する場合は、scaleX() (要素を水平方向に拡大縮小) 関数と scaleY() (要素を垂直方向に拡大縮小) 関数を使用することもできます。 scaleX() 関数と scaleY() 関数には 1 つの引数のみが必要です。次に例を示します。

scaleX(0.5); /* scale(0.5, 1); と同等 */
scaleY(0.5); /* scale(1, 0.5); と同等 */

4. スキュー()

skew() 関数は、要素を水平方向 (X 軸) と垂直方向 (Y 軸) に傾けて歪ませるために使用されます。関数の構文は次のとおりです。

skew(ax, ay)

パラメータ ax は要素の水平歪み角度を表し、パラメータ ay は要素の垂直歪み角度を表します。また、パラメータ ay は省略可能です。パラメータ ay を省略した場合、デフォルト値は 0 になります。

[例] skew() 関数を使用して、指定した要素を歪めます。

<!DOCTYPE html>
<html>
<ヘッド>
    <スタイル>
        div {
            幅: 100ピクセル;
            高さ: 100px;
            背景色: #CCC;
            マージン: 20px 0px 0px 10px;
            変換: skew(-15度, 20度);
        }
    </スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

実行結果は下の図に示されています。

図: skew() 関数のデモンストレーション

また、要素を水平方向のみ、または垂直方向のみに歪ませたい場合は、skewX() (要素を水平方向に拡大縮小) 関数と skewY() (要素を垂直方向に拡大縮小) 関数を使用して完了することもできます。 skewX() 関数と skewY() 関数には 1 つの引数のみが必要です。次に例を示します。

skewX(15deg); /* skew(15deg, 0deg); と同等 */
skewY(15deg); /* skew(0deg, 15deg); と同等 */

5. 行列()

matrix() 関数は、skew()、scale()、rotate()、translate() 関数の省略形として考えることができます。すべての 2D 変換操作は、matrix() 関数を通じて同時に定義できます。関数の構文形式は次のとおりです。

行列(a, b, c, d, tx, ty)

matrix() 関数の 6 つのパラメータは、scaleX()、skewY()、skewX()、scaleY()、translateX()、および translateY() 関数に対応します。matrix() を使用して、次のようなさまざまな 2D 変換操作を実装できます。

translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty);: ここで、tx と ty は水平方向と垂直方向の移動値です。
rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0);: ここで、a は次数の値です。 sin(a) と -sin(a) の値を入れ替えると逆回転を実行できます。
scale(sx, sy) = matrix(sx, 0, 0, sy, 0 ,0);: ここで、sx と sy は水平方向と垂直方向のスケーリング値です。
skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0 ,0);: ここで、axとayは度単位の水平値と垂直値です。

[例] matrix() 関数を使用して、要素に対して 2D 変換操作を実行します。

<!DOCTYPE html>
<html>
<ヘッド>
    <スタイル>
        div {
            幅: 100ピクセル;
            高さ: 100px;
            背景色: #CCC;
            マージン: 20px 0px 0px 10px;
            フロート: 左;
        }
        。1つ {
            変換: 行列(0.866, 0.5, -0.5, 0.866, 0, 0);
        }
        。二 {
            左マージン: 35px;
            変換: 行列(0.586, 0.8, -0.8, 0.686, 0, 0);
        }
        。三つ {
            左マージン: 40px;
            上マージン: 25px;
            変換: 行列(0.586, 0.8, -0.8, 0.866, 0, 0);
        }
        .4 {
            変換: 行列(0.586, 0.8, -0.8, 0.586, 40, 30);
        }
    </スタイル>
</head>
<本文>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="4"></div>
</本文>
</html>

実行結果は下の図に示されています。