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 ⁨2015年9月⁩.

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

試してみましょう

perspective-origin: center;

perspective-origin: top;

perspective-origin: bottom right;

perspective-origin: -170%;

perspective-origin: 500% 200%;

<section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </section>

#default-example { background: linear-gradient(skyblue, khaki); perspective: 550px; } #example-element { width: 100px; height: 100px; transform-style: preserve-3d; perspective: 250px; } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: white; } .front { background: rgba(90, 90, 90, 0.7); transform: translateZ(50px); } .back { background: rgba(0, 210, 0, 0.7); transform: rotateY(180deg) translateZ(50px); } .right { background: rgba(210, 0, 0, 0.7); transform: rotateY(90deg) translateZ(50px); } .left { background: rgba(0, 0, 210, 0.7); transform: rotateY(-90deg) translateZ(50px); } .top { background: rgba(210, 210, 0, 0.7); transform: rotateX(90deg) translateZ(50px); } .bottom { background: rgba(210, 0, 210, 0.7); transform: rotateX(-90deg) translateZ(50px); }

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> = 
 <position-one> |
 <position-two> |
 <position-four> 

<position-one> = 
 left |
 center |
 right |
 top |
 bottom |
 x-start |
 x-end |
 y-start |
 y-end |
 block-start |
 block-end |
 inline-start |
 inline-end |
 <length-percentage> 

<position-two> = 
 [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] |
 [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
 [ block-start | center | block-end ] && [ inline-start | center | inline-end ] |
 [ start | center | end ]{2} 

<position-four> = 
 [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] |
 [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] |
 [ [ start | end ] <length-percentage> ]{2} 

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