transform 変換プロパティ
最終更新：2026-09-13
transform transform 変換プロパティ
transform プロパティは、要素に対して平行移動・回転・拡縮・傾斜などの 2D または 3D の幾何変換を適用します。変換はレンダリング段階で発生し、ドキュメントフローのレイアウトには影響しないため、高パフォーマンスな視覚効果を作るための定番ツールです。transform は CSS アニメーションやインタラクション設計の中核をなすプロパティの一つです。
| カテゴリ | |
|---|---|
| 初期値 | none |
| 継承 | いいえ |
| 適用対象 | すべての要素 |
| アニメーションタイプ | transform |
| CSS バージョン | CSS3 |
| 状態 | 標準 |
📝 構文
transform: none | <transform-function>+;
/* <transform-function> = translate() | translate3d() | rotate() | rotate3d() | scale() | skew() | matrix() | perspective() etc. */⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
none | キーワード | 変換なし |
<transform-list> | タイプ | 変換関数のリスト：translate/rotate/scale/skew など |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| transform | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| すべての主要ブラウザーでサポート | |||||
ヒント： 1 つの transform 値に複数の変換関数を書く場合は空白で区切り、右から左へ（つまり最も右の関数から）順に適用されます。順序によって結果が変わるため、順番は重要です。
注意： transform は新しいスタックコンテキストと包含ブロックを作るため、position: fixed の子要素の配置基準が変わることがあります。
❓ よくある質問
QCSS の transform は周囲の要素のレイアウトに影響しますか？
Aしません。transform は合成（compositing）段階で扱われる視覚的な変換です。要素はドキュメントフロー上で元のスペースとサイズを占めたままなので、周囲の要素は一切影響を受けず、再描画も発生しません。これこそが transform アニメーションが left や top などのレイアウトプロパティよりずっと高性能な理由です。なお、変換した要素は position: fixed の子孫の包含ブロックになります。
Q2D 変換と 3D 変換の違いは何ですか？
A2D 変換は X・Y 軸の平面内で動作し、translate()・rotate()・scale()・skew() などが含まれます。3D 変換は Z 軸を加え、translateZ や rotateX などの関数を使います。本当の奥行きを見せるには通常、親要素に perspective を設定し、さらに transform-style: preserve-3d を組み合わせて子要素の 3D 位置を維持する必要があります。
Qtransform アニメーションが高速なのはなぜですか？GPU 加速されますか？
Atransform をアニメーションしてもレイアウトや再描画は発生しません。ブラウザは要素を独立した合成レイヤーに昇格させ、GPU が合成を担うため、ページのスクロールや他要素との重なりがあっても滑らかさが保たれます。毎フレーム再描画を強いる left/top と比べ、transform は 60fps を達成する首选の方法であり、will-change を添えるとさらに安定します。
Qtransform の関数はどの順序で適用されますか？translate を先に書くか rotate を先に書くかで違いがありますか？
A関数は右から左へ順に適用され、最も右が最初に効きます。たとえば transform: translate(20px) rotate(45deg) は先に回転してから回転後の方向へ平行移動し、transform: rotate(45deg) translate(20px) は先に平行移動してから回転するため、最終結果は完全に異なります。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
