transform
中級読み方：トランスフォーム｜英語：Transform
要素を移動・回転・拡大縮小するプロパティで、translate, rotate, scale などを指定するよ。
やさしい説明
transformは、要素を移動・回転・拡大縮小するCSSプロパティです。レイアウトに影響を与えずに見た目だけ変えられます。
写真を手で動かしたり、回したり、拡大したりするイメージです。元の場所はそのままで、見た目だけが変わります。
アニメーションとの相性が抜群です。transition や animation と組み合わせると、滑らかな動きを作れます。GPUで処理されるので top/left での移動より動作が軽いです。
具体例・使い方
/* 移動（translate） */
transform: translateX(100px); /* 右に100px */
transform: translateY(-50px); /* 上に50px */
transform: translate(10px, 20px); /* X方向・Y方向まとめて */
/* 回転（rotate） */
transform: rotate(45deg); /* 時計回りに45度 */
/* 拡大縮小（scale） */
transform: scale(1.5); /* 1.5倍に拡大 */
transform: scaleX(0.5); /* 横方向だけ0.5倍 */
/* ホバーで少し浮き上がるカード */
.card {
transition: transform 0.2s ease;
}
.card:hover {
transform: scale(1.05) translateY(-4px);
}よく使う transform 関数一覧
translate(x, y)— 要素を移動。%指定で自分のサイズ基準にもなる（中央揃えに便利）rotate(角度)— 回転。deg（度）、turn（回転数）で指定scale(倍率)— 拡大縮小。1.0が等倍、0で非表示になるskew(角度)— 斜めに傾けるtranslateZ / scale3d— 3D空間での変形（奥行き演出）
translate(-50%, -50%) は要素の中央揃えの定番テクニックです。position: absolute; top: 50%; left: 50%; と組み合わせて、要素を親の中央に配置するときによく使われます。
いつ使う？
- ホバーエフェクト（カードが少し浮く・拡大する）
- ローディングスピナー（回転アニメーション）
- スライドイン・フェードイン演出
- 要素の中央揃え（
translate(-50%, -50%)） - モーダルのポップアップアニメーション
間違いやすいポイント
❌ transform を複数行に分けて書くと上書きされる
CSS のプロパティは同じ名前を複数書くと後の値で上書きされます。複数の変形を組み合わせるときは、1行にスペース区切りでまとめて書きましょう。
/* ❌ 2つ目が1つ目を上書きしてしまう */
transform: translateX(10px);
transform: rotate(45deg); /* translateX が消える！ */
/* ✅ 1行にまとめる（適用順は左から右） */
transform: translateX(10px) rotate(45deg);よくある疑問
Q: transformで要素を中央に配置するには？
A: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); で親要素の中央に配置できます。
Q: 複数のtransformを同時に使うには？
A: transform: rotate(45deg) scale(1.5); のようにスペースで区切って1行に書きます。別々に書くと後の方で上書きされます。
Q: transformとtransitionの違いは？
A: transformは「変形の種類」、transitionは「変化のアニメーション」です。transform + transition で滑らかな動きになります。
関連用語
📖 関連レッスン
レッスンを見る →