Transform Origin プロパティ

最終更新：2026-09-13

transform-origin Transform Origin プロパティ

transform-origin プロパティは、要素が変換される基準点（原点）を設定します。デフォルトは要素の中心（50% 50%）で、回転・拡縮・スキューはすべてこの点を中心に実行されます。原点を調整すると、辺を中心に回転したり、角から拡縮したりするなど、大きく異なる効果を生み出せます。

カテゴリ
初期値	50% 50% 0
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

transform-origin: [<length> | <percentage> | left | center | right] [<length> | <percentage> | top | center | bottom] [<length>];

⚙️ 値

値	タイプ	説明
`<length> \| <percentage>`	タイプ	変換原点の座標
`left \| center \| right \| top \| bottom`	キーワード	あらかじめ定義された位置

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
transform-origin	✓ v36	✓ v12	✓ v16	✓ v9	✓ v23
すべての主要ブラウザーでサポート

ヒント： 3 番目の値（Z 軸の原点）は 3D 変換でのみ効果があり、通常 perspective と組み合わせます。2D 変換には最初の 2 値だけが必要です。

ヒント： left/center/right や top/center/bottom のようなキーワードは直感的です。正確な制御が必要な場合はパーセンテージや長さの値を使います。

❓ よくある質問

Q要素が中心を軸に回転するときにずれるように見えるのはなぜですか？

Aデフォルトでは変換原点は要素の幾何中心にあるため、rotate は中心を軸に回転します。角や辺の周りを回転させるには、原点をそこに移動します — 例えば transform-origin: top left; とすると、要素は左上隅を軸に回転し、「ドアが開く」「ファンブレード」のような効果が生まれます。

Qtransform-origin プロパティは移動（translate）に影響しますか？

Aいいえ。translate は要素全体を移動させ、原点とは無関係です。原点が影響するのは rotate、scale、skew のように「ある点を中心に行われる変換」だけです。したがって transform: translate(30px) rotate(45deg) では、移動の結果は transform-origin の影響を受けませんが、回転と拡縮の視覚的な中心は原点に従います。

QCSS で transform-origin のパーセンテージ値は何に対するものですか？

Aパーセンテージは要素自身の寸法に対して計算されます。0% 0% は左上隅、50% 50% は中心、100% 100% は右下隅です — 例えば transform-origin: 100% 50% は右辺の中央を使います。left、center、right、top、bottom のキーワードや、px のような長さの値で正確に位置を指定することもできます。

Qtransform-origin は 3D 変換に使えますか？3 番目の値はどう働きますか？

Aはい。最初の 2 値は X/Y 平面上の原点を定義し、3 番目（長さ）は Z 軸の原点を設定します（デフォルトは 0）。例えば transform-origin: 50% 50% -20px は原点を要素の後ろ 20px に移動させ、rotateX に異なる奥行き感を与えます。3D シーンでは効果を表示するために親要素にも perspective が必要です。