この記事の要点

transform は要素を回転・拡大縮小・移動・傾斜させる CSS プロパティ 主要関数: translate() / rotate() / scale() / skew() — 2D 系 3D 関数: translate3d() / rotateX/Y/Z() / perspective() 複数指定は左から順に適用。順序を変えると結果が変わる transform はGPU 合成に乗りやすく、top/left アニメより高速・低負荷

transform プロパティとは

transform は CSS で要素を変形（移動・回転・拡大縮小・傾斜）させるためのプロパティです。レイアウトを再計算せず合成（compositing）レイヤーで処理されるため、アニメーションのパフォーマンスが非常に良好です。

基本構文

.box {
  transform: translate(50px, 20px);    /* x, y 移動 */
  transform: rotate(45deg);            /* 回転 */
  transform: scale(1.5);               /* 拡大 */
  transform: skew(20deg, 0);           /* 傾斜 */
}

/* 複数指定は左から順に適用される */
.combo {
  transform: translate(50px, 0) rotate(30deg) scale(1.2);
}

2D 変形関数

関数	意味	例
translate(x, y)	x, y 方向に移動	translate(20px, 30px)
translateX(x) / translateY(y)	個別に移動	translateX(50%)
rotate(angle)	回転（deg / rad / turn）	rotate(0.25turn)
scale(s) / scale(sx, sy)	拡大縮小	scale(0.8)
scaleX(s) / scaleY(s)	個別に拡大縮小	scaleX(-1)（鏡像）
skew(ax, ay)	傾斜	skew(15deg, 0)
matrix(a,b,c,d,e,f)	2D 変形行列直接指定	低レベル指定

3D 変形関数

関数	意味
translate3d(x, y, z)	3 軸方向に移動
rotateX/Y/Z(angle)	各軸まわりに回転
rotate3d(x, y, z, angle)	任意軸まわりに回転
scale3d(sx, sy, sz)	3 軸スケーリング
perspective(d)	視点距離 — 3D 効果の強さ
matrix3d(...16値)	3D 変形行列直接指定

/* カードを Y 軸でめくる */
.card {
  perspective: 1000px;
}
.card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.card:hover .card-inner {
  transform: rotateY(180deg);
}

適用順序に注意

複数の変形関数を並べた場合、左から順に合成されます。translate → rotate と rotate → translate は結果が違います。

/* 「右に50px動かしてから45度回転」 */
.a { transform: translate(50px, 0) rotate(45deg); }

/* 「45度回転してから右に50px動かす」（回転後の右方向に移動） */
.b { transform: rotate(45deg) translate(50px, 0); }

transform-origin（変形の中心）

既定では要素の中央を基準に変形します。transform-origin で基準点を変えられます。

.box {
  transform-origin: left top;     /* 左上を基準に回転 */
  transform: rotate(45deg);
}

.box2 {
  transform-origin: 0 100%;       /* 左下 */
  transform: scale(2);
}

/* 3D の場合 z 座標も */
.box3 {
  transform-origin: 50% 50% 100px;
}

パフォーマンスと GPU 合成

transform はブラウザのコンポジタスレッドで処理され、再レイアウト（reflow）・再描画（repaint）を引き起こしません。これにより 60fps の滑らかなアニメーションが実現できます。

アニメ手段	レイアウト	描画	合成	速度
left / top	○	○	○	遅い
width / height	○	○	○	遅い
transform / opacity	×	×	○	速い

位置の移動もtop: 100px ではなく transform: translateY(100px) を使うほうが GPU 合成に乗ります。さらに will-change: transform を指定すると、ブラウザに事前にレイヤー生成を促せます（過度な指定はメモリを食うので注意）。

transition / animation との組み合わせ

/* hover で拡大 */
.btn {
  transition: transform 0.2s ease-out;
}
.btn:hover {
  transform: scale(1.05);
}

/* @keyframes で揺らす */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
.shake { animation: shake 0.3s linear; }

よく使う実例

用途	指定例
中央寄せ（絶対配置）	top:50%; left:50%; transform:translate(-50%,-50%);
画像鏡像	transform: scaleX(-1);
180° 反転	transform: rotate(180deg);
ホバー浮き上がり	transform: translateY(-4px);
ローディングスピナ	animation: spin 1s linear infinite;

注意点

• transform はインライン要素には効かない。display: inline-block / block / flex 等にする
• 固定位置 (position: fixed) の祖先に transform を指定すると、子の fixed はその transform 要素を基準にしてしまう（仕様）
• テキストを scale 拡大するとぼやける（ラスタライズ後にスケール）— 重要文字は font-size で指定
• 過度な will-change はメモリ消費増。必要な要素にだけ

関連

• トランスフォーム — 親カテゴリ
• animationプロパティ
• transition プロパティ
• transform-origin / perspective / transform-style
• will-change — GPU 合成ヒント