CSS: CSS Transform
最終更新：2026-10-13
1. Transform関数
(1) 早見表
| 関数 | 値 | 効果 |
|---|---|---|
translate(x, y) |
50px、-30px、50% |
要素の移動 |
translateX(x) |
50px |
水平方向の移動 |
translateY(y) |
-30px |
垂直方向の移動 |
scale(n) |
1.5、2、0.5 |
スケール（1 = オリジナル） |
scaleX(n) |
1.5 |
水平方向のスケール |
scaleY(n) |
0.8 |
垂直方向のスケール |
rotate(deg) |
45deg、90deg、-180deg |
回転（正 = 時計回り） |
skew(x, y) |
10deg、-5deg |
傾斜歪み |
skewX(deg) |
10deg |
水平方向の傾斜 |
skewY(deg) |
10deg |
垂直方向の傾斜 |
transform-origin |
center、top left、50% 50% |
変換の原点 |
2. translate（移動）
▶ サンプル
▶ 試してみよう3. scale（サイズ変更）
▶ サンプル
▶ 試してみよう4. rotate（回転）
▶ サンプル
▶ 試してみよう5. transform-origin
回転/スケールの基準点を変更：
▶ サンプル
▶ 試してみよう6. 変換の組み合わせ
複数の変換は右から左（逆順）に実行：
CSS
.box {
transform: translateX(50px) rotate(45deg) scale(1.2);
/* まずスケール → 次に回転 → 最後に移動 */
}
❓ よくある質問
Q transformとtop/leftの変更の違いは何ですか？
A transformは合成段階のみをトリガーし、レイアウトやペイントリフローを引き起こさないため、パフォーマンスが向上します。top/leftの変更はリフローをトリガーし、ページのラグを引き起こします。アニメーションにはtransformを優先してください。
Q position: absoluteとtransform: translate(-50%, -50%)の組み合わせはどういう意味ですか？
A 古典的な中央揃えソリューションです。
top: 50%; left: 50%; transform: translate(-50%, -50%);は、まず要素の左上隅を親の中央に配置し、その後translateで自身の寸法の半分だけ戻して完璧な中央揃えを実現します。Q 3D変換には特別な設定が必要ですか？
A
translateZ()、rotateX()、rotateY()などを使用する場合は、親にperspectiveを追加してください（例：perspective: 1000px）。さもないと3D効果が表示されない場合があります。3D変換はGPUアクセラレーションをトリガーし、2Dよりパフォーマンスが向上します。📖 まとめ
transformはCSSアニメーションの基盤です——translate、scale、rotate、skewは無数の効果に組み合わせることができます- 変換はドキュメントフローに影響しません（要素は「違って見える」が同じスペースを占有）
- 3D変換には
perspectiveが必要で、奥行き効果を実現 - 変換を組み合わせる場合は、translateを最後に配置（コード順では最初）
📝 練習問題
- ホバー時に右に50px移動し、1.5倍にスケールするボックスを作成してください。
- ホバー時にY軸を中心に180°回転する画像を作成してください（
perspectiveが必要）。 - 「フリップカード」を作成してください——ホバーでカードが裏返って裏のコンテンツを表示します（
rotateYとbackface-visibilityを使用）。 transform-originで回転中心を変更し、「振り子」エフェクトを作成してください。
