CSS3 2D トランスフォーム

CSS3 のトランスフォーム（Transform）を使用すると、要素を移動、回転、拡大縮小、および傾斜させることができます。これは、要素の形状や位置を変更するための強力な手法です。

1. CSS3 2D トランスフォーム

2D トランスフォームは、要素を 2 次元の平面（X 軸と Y 軸）上で変化させます。

主要なメソッドは以下の通りです：

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

2. translate() メソッド

translate() メソッドは、現在の位置を基準にして、指定されたパラメータ（X 軸と Y 軸）に従って要素を移動させます。

以下の例では、<div> 要素を右方向に 50px、下方向に 100px 移動させます。

div {
  /* X軸に50px、Y軸に100px移動 */
  transform: translate(50px, 100px);
}

3. rotate() メソッド

rotate() メソッドは、指定された角度に応じて要素を時計回り、または反時計回りに回転させます。

3.1 正の値による回転

以下の例では、<div> 要素を時計回りに 20 度回転させます。

div {
  /* 時計回りに20度回転 */
  transform: rotate(20deg);
}

3.2 負の値による回転

負の値を指定すると、要素は反時計回りに回転します。

div {
  /* 反時計回りに20度回転 */
  transform: rotate(-20deg);
}

4. scale() メソッド

scale() メソッドは、要素の幅と高さを指定した倍率で拡大または縮小します。

4.1 幅と高さの同時指定

以下の例では、<div> 要素の幅を元の 2 倍に、高さを 3 倍に拡大します。

div {
  /* 幅を2倍、高さを3倍に拡大 */
  transform: scale(2, 3);
}

4.2 縮小の指定

1 未満の値を指定すると、要素は縮小されます。以下の例では、幅と高さを半分に縮小します。

div {
  /* 幅と高さを0.5倍に縮小 */
  transform: scale(0.5, 0.5);
}

4.3 scaleX() と scaleY()

scaleX() は幅のみ、scaleY() は高さのみを変更します。

div {
  /* 幅のみを2倍にする */
  transform: scaleX(2);
}

div {
  /* 高さのみを3倍にする */
  transform: scaleY(3);
}

5. skew() メソッド

skew() メソッドは、指定された角度に沿って要素を X 軸と Y 軸方向に傾斜（歪ませる）させます。

5.1 skewX() と skewY()

skewX() は X 軸方向に、skewY() は Y 軸方向に要素を傾けます。

div {
  /* X軸方向に20度傾斜 */
  transform: skewX(20deg);
}

div {
  /* Y軸方向に20度傾斜 */
  transform: skewY(20deg);
}

5.2 skew() の一括指定

skew(x-angle, y-angle) の形式で両方向を同時に指定できます。

div {
  /* X軸に20度、Y軸に10度傾斜 */
  transform: skew(20deg, 10deg);
}

6. matrix() メソッド

matrix() メソッドは、これらすべての 2D トランスフォームメソッドを 1 つに統合したものです。

matrix() メソッドは、数学的な行列計算（6 つのパラメータ）を使用して、要素の回転、拡大縮小、移動、傾斜を一度に行うことができます。
パラメータの順序は以下の通りです：
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

div {
  /* matrixを用いた複合的な変形 */
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

7. 2D トランスフォームプロパティ一覧

8. 2D トランスフォームメソッド一覧