From c921a6c565ddc6f3eef7054903e2566e99fcc414 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 15 Oct 2021 01:04:20 +0900 Subject: CSS 座標変換の文書を更新(変換関数を除く) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/13 時点の英語版に同期 --- files/ja/web/css/perspective-origin/index.md | 484 +++++++++++++-------------- 1 file changed, 238 insertions(+), 246 deletions(-) (limited to 'files/ja/web/css/perspective-origin') diff --git a/files/ja/web/css/perspective-origin/index.md b/files/ja/web/css/perspective-origin/index.md index 24882d444e..1aecc84362 100644 --- a/files/ja/web/css/perspective-origin/index.md +++ b/files/ja/web/css/perspective-origin/index.md @@ -5,25 +5,29 @@ tags: - 3D - CSS - CSS プロパティ - - CSS 変形 + - CSS 座標変換 + - グラフィック + - プロパティ + - Reference + - 座標変換 - perspective - perspective-origin - - リファレンス + - recipe:css-property +browser-compat: css.properties.perspective-origin translation_of: Web/CSS/perspective-origin --- {{CSSRef}} -[CSS](/ja/docs/Web/CSS) の **`perspective-origin`** プロパティは、閲覧者の視点の位置を決めます。これは {{cssxref("perspective")}} プロパティによって消失点として使われます。 +[CSS](/ja/docs/Web/CSS) の **`perspective-origin`** プロパティは、閲覧者の視点の位置を決めます。これは {{cssxref("perspective")}} プロパティによって*消失点*として使われます。 {{EmbedInteractiveExample("pages/css/perspective-origin.html")}} - +**`perspective-origin`** および {{cssxref('perspective')}} の各プロパティは、三次元空間で座標変換される子の親に設定するものであり、座標変換される要素に設定される [`perspective()`](/ja/docs/Web/CSS/transform-function/perspective()) 変換関数とは異なります。 -**`perspective-origin`** および {{cssxref('perspective')}} の各プロパティは、三次元空間で変換される子の親に設定するものであり、変換される要素に設定される {{cssxref("transform-function/perspective", "perspective()")}} 変換関数とは異なります。 +## 構文 -

構文

- -
/* 1値構文 */
+```css
+/* 1値構文 */
 perspective-origin: x-position;
 
 /* 2値構文 */
@@ -36,220 +40,224 @@ perspective-origin: y-position x-position;
 /* グローバル値 */
 perspective-origin: inherit;
 perspective-origin: initial;
+perspective-origin: revert;
 perspective-origin: unset;
-
- -

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

形式文法

+``` -{{csssyntax}} +### 値 -

+- _x-position_ -

視点の変更

+ - : *消失点*の横座標上の位置を示します。次のいずれかの値です。 -この例は主要な `perspective-origin` 値で立方体を表示します。 + - {{cssxref("<length-percentage>")}} は、絶対的な length 値、または要素の幅に対する相対値で位置を示します。負の数も使えます。 + - `left` キーワードは、length 値 `0` を示すショートカットです。 + - `center` キーワードは、パーセント値 `50%` を示すショートカットです。 + - `right` キーワードは、パーセント値 `100%` を示すショートカットです。 -

結果

+- _y-position_ -{{EmbedLiveSample('Changing_the_perspective_origin', '100%', 700)}} + - : *消失点*の縦座標上の位置を示します。次のいずれかの値です。 + + - {{cssxref("<length-percentage>")}} は、絶対的な length 値、または要素の高さに対する相対値で位置を示します。負の数も使えます。 + - `top` キーワードは、 length 値 `0` を示すショートカットです。 + - `center` キーワードは、パーセント値 `50%` を示すショートカットです。 + - `bottom` キーワードは、パーセント値 `100%` を示すキーワードです。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} -

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 の値 (例ごとに異なる) */
+## 例
+
+

視点の変更

+ +この例は主要な `perspective-origin` 値で立方体を表示します。 + +#### HTML + +```html +
+ +
+
perspective-origin: top left;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: top;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: top right;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: left;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: 50% 50%;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: right;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: bottom left;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: bottom;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: bottom right;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: -200% -200%;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: 200% 200%;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: 200% -200%;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+``` + +#### CSS + +```css +/* perspective-origin の値 (例ごとに異なる) */ .potl { perspective-origin: top left; } @@ -351,41 +359,25 @@ section { text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); -}
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}}{{Spec2('CSS Transforms 2')}}初回定義
+} +``` -{{cssinfo}} +#### 結果 + +{{EmbedLiveSample('Changing_the_perspective_origin', '100%', 700)}} + +## 仕様書 + +{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -
-{{Compat("css.properties.perspective-origin")}} -
+{{Compat}} ## 関連情報 - +- [CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) +- {{cssxref('transform-style')}} +- {{cssxref('transform-function')}} +- {{cssxref('perspective')}} +- [`transform: perspective()`](/ja/docs/Web/CSS/transform-function/perspective()) 関数 -- cgit v1.2.3-54-g00ecf