この記事の要点

transform プロパティは要素を移動・回転・拡縮・傾斜させる。レイアウトを崩さず描画レイヤーだけ変形 基本関数: translate() / rotate() / scale() / skew() — 2D 変形 3D 変形: rotateX/Y/Z() / perspective() / translate3d() — GPU 加速される transition と組み合わせ: transform: translateY(-4px) でホバー浮き上がり効果 transform-origin で基点を変更 — 中心 (初期値) / 左上 / 右下など任意指定

CSS transform とは

transform プロパティは要素を移動・回転・拡縮・傾斜させるための CSS プロパティです。position や margin と違いレイアウト計算には影響せず描画レイヤーだけ動かすため、滑らかなアニメーションを実現できます。

2D 変形関数

関数	用途	例
translate(x, y)	平行移動	translate(20px, 10px)
translateX(x)	X 軸移動	translateX(50%)
translateY(y)	Y 軸移動	translateY(-100%)
rotate(angle)	回転	rotate(45deg)
scale(x, y)	拡縮	scale(1.2, 0.8)
scale(n)	等倍拡縮	scale(1.5)
skew(ax, ay)	傾斜	skew(10deg, 0)
matrix()	行列で一括指定	matrix(1, 0, 0, 1, 0, 0)

基本例

/* 平行移動 */
.move    { transform: translate(50px, 20px); }

/* 回転 */
.rotate  { transform: rotate(30deg); }

/* 拡大 */
.zoom    { transform: scale(1.5); }

/* 縮小 */
.shrink  { transform: scale(0.5); }

/* 傾斜 */
.skew    { transform: skew(20deg); }

/* 複数組み合わせ（左から順に適用） */
.combo   { transform: translateX(100px) rotate(45deg) scale(1.2); }

順序が重要: translate → rotate と rotate → translate は結果が違います。前者は「移動してから回転」、後者は「回転してから（傾いた軸で）移動」。

transform-origin — 基点

初期値は要素の中心 (50% 50%) で、回転や拡縮もそこを軸にします。transform-origin で基点を変更可能。

/* 左上を基点に回転 */
.from-tl {
    transform-origin: top left;
    transform: rotate(15deg);
}

/* 数値指定 */
.from-xy {
    transform-origin: 20px 30px;
    transform: rotate(45deg);
}

/* 拡縮 0 で「左から伸びる」エフェクト */
.expand {
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.3s;
}
.expand:hover { transform: scaleX(1); }

3D 変形

X / Y / Z の 3 軸を意識した変形ができます。Z 軸 (奥行き) を見るには親に perspective が必要。

.scene {
    perspective: 800px;       /* 視点までの距離 */
}
.card {
    width: 300px;
    height: 200px;
    transition: transform 0.6s;
    transform-style: preserve-3d;  /* 子要素を 3D 空間で配置 */
}
.card:hover {
    transform: rotateY(180deg);    /* 横回転 */
}

3D 関数	意味
rotateX(angle)	X 軸まわり回転（横軸でめくれる）
rotateY(angle)	Y 軸まわり回転（縦軸でめくれる）
rotateZ(angle)	Z 軸まわり回転（rotate() と同じ）
translate3d(x,y,z)	3D 移動。GPU 加速の最強コンボ
scale3d(x,y,z)	3D 拡縮
perspective()	変形関数内で遠近感を与える

定番パターン: ホバー浮き上がり

.card {
    transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

定番パターン: 中央配置

position: absolute 要素の正確な中央配置で transform は欠かせない。

.modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 自分のサイズ分戻す */
}

定番パターン: アニメーション

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.loader {
    animation: spin 1s linear infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-20px); }
}
.bouncy {
    animation: bounce 0.6s ease-in-out infinite;
}

GPU 加速とパフォーマンス

transform と opacity は合成 (compositing) 段階で処理されるため、レイアウト / ペイントを再計算せず GPU に処理を任せられます。アニメーションは必ずこの 2 つに収めるのがセオリー。

変更プロパティ	コスト
width / height / top	レイアウト (重い)
background-color	ペイント (中)
transform / opacity	合成のみ (軽い)

will-change: transform でブラウザに事前最適化を指示できる（多用は逆効果）。

FAQ

Q: transform 中の子要素が滲む
A: GPU 合成時のサブピクセル位置調整。backface-visibility: hidden や transform: translateZ(0) で改善することがある。

Q: position: fixed が効かなくなった
A: 親に transform や filter, perspective が指定されていると、fixed の基準がそこになる仕様。

Q: scale で画像がボケる
A: 元画像より大きく拡大するとボケる。image-rendering: crisp-edges で改善（ドット絵向け）。SVG なら無劣化。