transformは、要素を「動かす」「回す」「拡大・縮小する」など、2D・3D変形を行うためのCSSプロパティです。アニメーションや視覚的な演出でもよく使われます。
1. transformで使える主な値一覧
translate()：要素を指定した距離だけ移動させる（位置の変更）。
rotate()：要素を回転させる。角度はdeg（度）で指定。
scale()：要素を拡大・縮小する。比率で指定。
skew()：要素を傾ける（斜めに歪ませる）。
matrix()：変形を行列でまとめて指定（複雑な操作向け）。
perspective()：3D変形時の奥行きの見え方を指定。
translateX() / translateY() / translateZ()：それぞれX軸・Y軸・Z軸方向に移動。
rotateX() / rotateY() / rotateZ()：各軸を中心に回転。3D回転で使用。
scaleX() / scaleY() / scaleZ()：各軸方向に個別で拡大・縮小。
2. よく使う3つのプロパティを深掘り
translate（移動）
要素をX軸・Y軸方向に移動させる。
位置を指定する単位はpx、%、またはvw/vhなどが使える。
.box {
transform: translate(50px, 100px); /* 右へ50px、下へ100px */
}
- 1つの値だけ指定した場合：translate(50px) → X軸方向にだけ移動。
- %を使うと、要素自身のサイズを基準に移動します。
rotate（回転）
要素を中心点（transform-origin）を軸に回転させます。
.box {
transform: rotate(45deg); /* 時計回りに45度回転 */
}
- 負の値を指定すると反時計回りに回転。例：
rotate(-30deg) - デフォルトの回転軸は要素の中心（変更は
transform-originで指定可能）
transform-originの例
.box {
transform-origin: top left; /* 左上を基準に回転 */
}
scale（拡大・縮小）
要素を拡大・縮小します。比率を数値で指定します。
.box {
transform: scale(1.5); /* 幅・高さを1.5倍に拡大 */
}
- scale(2) → 2倍（200%）
- scale(0.5) → 半分（50%）
- scaleX(2) や scaleY(0.5) のように、軸ごとに指定可能。
3. 複数のtransformを同時に使う
複数の変形を空白区切りで連続指定できます。
.box {
transform: translateX(50px) rotate(45deg) scale(1.2);
}
上記は、「右に50px移動 → 45°回転 → 1.2倍拡大」の順で適用されます。
ポイント：transformは「見た目を変えるだけ」であり、実際のレイアウト（位置や余白計算）には影響しません。
そのため、他の要素の配置を崩さずに視覚的な動きをつけるのに最適です。
