--- title: perspective-origin slug: Web/CSS/perspective-origin tags: - 3D - CSS - CSS プロパティ - CSS 変形 - perspective - perspective-origin - リファレンス translation_of: Web/CSS/perspective-origin --- <div>{{CSSRef}}</div> <p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>perspective-origin</code></strong> プロパティは、閲覧者の視点の位置を決めます。これは {{cssxref("perspective")}} プロパティによって<em>消失点</em>として使われます。</p> <div>{{EmbedInteractiveExample("pages/css/perspective-origin.html")}}</div> <p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> <p><strong><code>perspective-origin</code></strong> および {{cssxref('perspective')}} の各プロパティは、三次元空間で変換される子の親に設定するものであり、変換される要素に設定される {{cssxref("transform-function/perspective", "perspective()")}} 変換関数とは異なります。</p> <h2 id="Syntax" name="Syntax">構文</h2> <pre class="brush:css no-line-numbers">/* 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; </pre> <h3 id="Values" name="Values">値</h3> <dl> <dt><em>x-position</em></dt> <dd><em>消失点</em>の横座標上の位置を示します。次のいずれかの値です。 <ul> <li>{{cssxref("<length-percentage>")}} は、絶対的な length 値、又は要素の幅に対する相対値で位置を示します。負の数も使えます。</li> <li><code>left</code> キーワードは、 length 値 <code>0</code> を示すショートカットです。</li> <li><code>center</code> キーワードは、パーセント値 <code>50%</code> を示すショートカットです。</li> <li><code>right</code> キーワードは、パーセント値 <code>100%</code> を示すショートカットです。</li> </ul> </dd> <dt><em>y-position</em></dt> <dd><em>消失点</em>の縦座標上の位置を示します。次のいずれかの値です。 <ul> <li>{{cssxref("<length>")}} は、絶対的な length 値、又は要素の高さに対する相対値で位置を示します。負の数も使えます。</li> <li><code>top</code> キーワードは、 length 値 <code>0</code> を示すショートカットです。</li> <li><code>center</code> キーワードは、パーセント値 <code>50%</code> を示すショートカットです。</li> <li><code>bottom</code> キーワードは、パーセント値 <code>100%</code> を示すキーワードです。</li> </ul> </dd> </dl> <h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> {{csssyntax}} <h2 id="Examples" name="Examples">例</h2> <h3 id="Changing_the_perspective_origin" name="Changing_the_perspective_origin">視点の変更</h3> <p>この例は主要な <code>perspective-origin</code> 値で立方体を表示します。</p> <h4 id="Result" name="Result">結果</h4> <p>{{EmbedLiveSample('Changing_the_perspective_origin', '100%', 700)}}</p> <h4 id="HTML">HTML</h4> <pre class="brush: 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> </pre> <h4 id="CSS">CSS</h4> <pre class="brush: 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); }</pre> <h2 id="Specifications" name="Specifications">仕様書</h2> <table class="standard-table"> <thead> <tr> <th scope="col">仕様書</th> <th scope="col">状態</th> <th scope="col">備考</th> </tr> </thead> <tbody> <tr> <td>{{SpecName('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}}</td> <td>{{Spec2('CSS Transforms 2')}}</td> <td>初回定義</td> </tr> </tbody> </table> <p>{{cssinfo}}</p> <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> <div> <p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> <p>{{Compat("css.properties.perspective-origin")}}</p> </div> <h2 id="See_also" name="See_also">関連情報</h2> <ul> <li><a href="/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">CSS 変形の利用</a></li> <li>{{cssxref('transform-style')}}</li> <li>{{cssxref('transform-function')}}</li> <li>{{cssxref('perspective')}}</li> <li><code><a href="/ja/docs/Web/CSS/transform-function/perspective">transform: perspective()</a></code> 関数</li> </ul>