perspective-origin

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

perspective-originCSS のプロパティで、閲覧者の視点の位置を決めます。これは perspective プロパティによって消点として使われます。

試してみましょう

perspective-origin および perspective の各プロパティは、三次元空間で座標変換される子の親に設定するものであり、座標変換される要素に設定される perspective() 変換関数とは異なります。

構文

css
/* 1 値構文 */
perspective-origin: x-position;

/* 2 値構文 */
perspective-origin: x-position y-position;

/* x-position と y-position がキーワードである場合は、
   以下の構文も有効 */
perspective-origin: y-position x-position;

/* グローバル値 */
perspective-origin: inherit;
perspective-origin: initial;
perspective-origin: revert;
perspective-origin: revert-layer;
perspective-origin: unset;

x-position

消失点の横座標上の位置を示します。次のいずれかの値です。

  • <length-percentage> は、絶対的な length 値、または要素の幅に対する相対値で位置を示します。負の数も使えます。
  • left キーワードは、length 値 0 を示すショートカットです。
  • center キーワードは、パーセント値 50% を示すショートカットです。
  • right キーワードは、パーセント値 100% を示すショートカットです。
y-position

消失点の縦座標上の位置を示します。次のいずれかの値です。

  • <length-percentage> は、絶対的な length 値、または要素の高さに対する相対値で位置を示します。負の数も使えます。
  • top キーワードは、 length 値 0 を示すショートカットです。
  • center キーワードは、パーセント値 50% を示すショートカットです。
  • bottom キーワードは、パーセント値 100% を示すキーワードです。

公式定義

初期値50% 50%
適用対象座標変換可能要素
継承なし
パーセント値囲みボックスの寸法に対する相対値
計算値<length> の場合は絶対的な値、それ以外の場合はパーセント値
アニメーションの種類長さ、パーセント値、 calc の単純なリスト

形式文法

perspective-origin = 
<position>

<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<length-percentage> =
<length> |
<percentage>

視点の原点の変更

perspective-origin の変更方法を示す例は、 CSS 座標変換の使用 > 視点の変更にあります。

仕様書

Specification
CSS Transforms Module Level 2
# perspective-origin-property

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
perspective-origin
bottom
center
left
right
top

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報