perspective-origin
CSS の perspective-origin
プロパティは、閲覧者の視点の位置を決めます。これは perspective
プロパティによって消失点として使われます。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
perspective-origin
および perspective
の各プロパティは、三次元空間で変換される子の親に設定するものであり、変換される要素に設定される perspective()
変換関数とは異なります。
構文
/* 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: unset;
値
- x-position
- 消失点の横座標上の位置を示します。次のいずれかの値です。
<length-percentage>
は、絶対的な length 値、又は要素の幅に対する相対値で位置を示します。負の数も使えます。left
キーワードは、 length 値0
を示すショートカットです。center
キーワードは、パーセント値50%
を示すショートカットです。right
キーワードは、パーセント値100%
を示すショートカットです。
- y-position
- 消失点の縦座標上の位置を示します。次のいずれかの値です。
<length>
は、絶対的な length 値、又は要素の高さに対する相対値で位置を示します。負の数も使えます。top
キーワードは、 length 値0
を示すショートカットです。center
キーワードは、パーセント値50%
を示すショートカットです。bottom
キーワードは、パーセント値100%
を示すキーワードです。
形式文法
<position>ここで
<position> = [ [ 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
値で立方体を表示します。
結果
HTML
<section>
<figure>
<caption><code>perspective-origin: top left;</code></caption>
<div class="container">
<div class="cube potl">
<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>
</figure>
<figure>
<caption><code>perspective-origin: top;</code></caption>
<div class="container">
<div class="cube potm">
<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>
</div>
</figure>
<figure>
<caption><code>perspective-origin: top right;</code></caption>
<div class="container">
<div class="cube potr">
<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>
</div>
</figure>
<figure>
<caption><code>perspective-origin: left;</code></caption>
<div class="container">
<div class="cube poml">
<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>
</div>
</figure>
<figure>
<caption><code>perspective-origin: 50% 50%;</code></caption>
<div class="container">
<div class="cube pomm">
<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>
</div>
</figure>
<figure>
<caption><code>perspective-origin: right;</code></caption>
<div class="container">
<div class="cube pomr">
<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>
</div>
</figure>
<figure>
<caption><code>perspective-origin: bottom left;</code></caption>
<div class="container">
<div class="cube pobl">
<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>
</div>
</figure>
<figure>
<caption><code>perspective-origin: bottom;</code></caption>
<div class="container">
<div class="cube pobm">
<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>
</div>
</figure>
<figure>
<caption><code>perspective-origin: bottom right;</code></caption>
<div class="container">
<div class="cube pobr">
<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>
</div>
</figure>
<figure>
<caption><code>perspective-origin: -200% -200%;</code></caption>
<div class="container">
<div class="cube po200200neg">
<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>
</div>
</figure>
<figure>
<caption><code>perspective-origin: 200% 200%;</code></caption>
<div class="container">
<div class="cube po200200pos">
<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>
</div>
</figure>
<figure>
<caption><code>perspective-origin: 200% -200%;</code></caption>
<div class="container">
<div class="cube po200200">
<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>
</div>
</figure>
</section>
CSS
/* perspective-origin の値 (例ごとに異なる) */
.potl {
perspective-origin: top left;
}
.potm {
perspective-origin: top;
}
.potr {
perspective-origin: top right;
}
.poml {
perspective-origin: left;
}
.pomm {
perspective-origin: 50% 50%;
}
.pomr {
perspective-origin: right;
}
.pobl {
perspective-origin: bottom left;
}
.pobm {
perspective-origin: bottom;
}
.pobr {
perspective-origin: bottom right;
}
.po200200neg {
perspective-origin: -200% -200%;
}
.po200200pos {
perspective-origin: 200% 200%;
}
.po200200 {
perspective-origin: 200% -200%;
}
/* コンテナーの div、立方体の div、面の一般的な設定 */
.container {
width: 100px;
height: 100px;
margin: 24px;
border: none;
}
.cube {
width: 100%;
height: 100%;
backface-visibility: visible;
perspective: 300px;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
width: 100px;
height: 100px;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}
/* 方向に基づいてそれぞれの面を設定 */
.front {
background: rgba(0, 0, 0, 0.3);
transform: translateZ(50px);
}
.back {
background: rgba(0, 255, 0, 1);
color: black;
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(196, 0, 0, 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgba(0, 0, 196, 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgba(196, 196, 0, 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgba(196, 0, 196, 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
/* レイアウトの見栄えをよくする */
section {
background-color: #EEE;
padding: 10px;
font-family: sans-serif;
text-align: left;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Transforms Level 2 perspective-origin の定義 |
編集者草案 | 初回定義 |
初期値 | 50% 50% |
---|---|
適用対象 | 変形可能要素 |
継承 | なし |
パーセント値 | 囲みボックスの寸法に対する相対値 |
計算値 | length の場合は絶対的な値、それ以外の場合はパーセント値 |
アニメーションの種類 | 長さ、パーセント値、 calc の単純なリスト |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。