Perspective Origin プロパティ

最終更新：2026-09-13

perspective-origin Perspective Origin プロパティ

perspective-origin プロパティは、3D 透視における観察者の位置、つまり消失点が要素に投影される位置を定義します。デフォルトは要素の中心（50% 50%）です。これを調整すると、3D シーンが見える角度（上から、横からなど）が変化し、perspective と連携して機能します。

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

📝 構文

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

⚙️ 値

値	タイプ	説明
`<length> \| <percentage>`	タイプ	透視原点の座標
`left \| center \| right \| top \| bottom`	キーワード	定義済みの位置

▶ 例

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

▶ 試す

🌐 ブラウザーサポート

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

ヒント： パーセンテージは透視が適用される要素に対するものです。left/right/top/bottom キーワードの方が直感的です。

ヒント： perspective-origin を変更しても 2D 変換には影響しません。違いが現れるのは rotateX/Y や translateZ などの 3D 変換のみです。

❓ よくある質問

Qperspective-origin と transform-origin の違いは何ですか？

Aperspective-origin は透視を持つ親に設定され、観察者の消失点がシーンに投影される位置を定義し、すべての 3D 子要素が共有する透視の方向に影響します。transform-origin は単一の要素に設定され、その要素自身の変換の基準点を定義します。前者は「どこから見るか」を、後者は「要素が何を中心に回転・拡縮するか」を制御します。

Q要素を 3D で下から見上げているように見せるにはどうすればよいですか？

A視点を要素の下に置きます。perspective-origin: 50% 100% は消失点をコンテナの下端中央に配置するため、観察者は下から見上げ、要素はローアングル（低い角度）で表示されます。同様に 0% 50% は左から、100% 50% は右から、50% 0% は上からの視点です。これを回転角度と組み合わせて、望みの視点を得てください。

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

A透視を持つ親要素の寸法に対するものです。0% 0% は左上隅、100% 100% は右下隅、デフォルトの 50% 50% は中心です。パーセンテージのほかに、left、center、right、top、bottom の各キーワードや長さの値も使えます。2D 変換には影響せず、違いが現れるのは 3D のみです。

Qperspective-origin を変更したのに変化が見えないのはなぜですか？

Aperspective-origin は透視を持つ 3D 変換にのみ影響します。子要素に rotateX/Y や translateZ のような 3D 変換がない場合、あるいは親に perspective がまったくない場合、消失点を動かしても視覚的な違いは生じません。また、透視距離が非常に大きい場合、視点間の違いも非常にわずかになります。