transform
中級読み方：トランスフォーム｜英語：Transform
要素を移動・回転・拡大縮小するプロパティで、translate, rotate, scale などを指定するよ。いつ使う？ ホバー時にボタンを少し大きくしたい(scale)、要素を斜めに傾けたい(rotate)、位置を微調整したい(translate)ときに使うよ。間違いやすいポイント: transformはインライン要素（span, a等）には効かないよ。display: inline-block; を追加しよう。また、複数のtransformを書くときはスペース区切りで1つのプロパティにまとめるよ。
やさしい説明
transformは、要素を移動・回転・拡大縮小するCSSプロパティです。レイアウトに影響を与えずに見た目だけ変えられます。
写真を手で動かしたり、回したり、拡大したりするイメージです。元の場所はそのままで、見た目だけが変わります。
アニメーションとの相性が抜群です。transitionやanimationと組み合わせると、滑らかな動きを作れます。GPUで処理されるので動作も軽いです。
具体例・使い方
/* 移動 */
transform: translateX(100px); /* 右に100px */
transform: translateY(-50px); /* 上に50px */
/* 回転 */
transform: rotate(45deg); /* 45度回転 */
/* 拡大縮小 */
transform: scale(1.5); /* 1.5倍に拡大 */
/* ホバーで少し大きくなるカード */
.card:hover {
transform: scale(1.05);
transition: transform 0.2s;
}いつ使う？
ホバーエフェクト（カードが少し浮く）、ローディングアニメーション（回転）、スライドイン演出（横から登場）などに使います。
間違いやすいポイント
❌ transformを複数書くと上書きされる
/* ❌ 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 で滑らかな動きになります。
関連用語
📖 関連レッスン
レッスンを見る →