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/index.md | 248 +++++++++++++++++----------------- 1 file changed, 122 insertions(+), 126 deletions(-) (limited to 'files/ja/web/css/perspective') diff --git a/files/ja/web/css/perspective/index.md b/files/ja/web/css/perspective/index.md index 4adb05e7ef..220db45b10 100644 --- a/files/ja/web/css/perspective/index.md +++ b/files/ja/web/css/perspective/index.md @@ -2,144 +2,154 @@ title: perspective slug: Web/CSS/perspective tags: + - 3D - CSS - CSS プロパティ - - CSS 変形 - - Reference + - CSS 座標変換 + - 距離 - グラフィック - プロパティ - - 距離 + - Reference + - perspective + - recipe:css-property +browser-compat: css.properties.perspective translation_of: Web/CSS/perspective --- {{CSSRef}} -**`perspective`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 z=0 の平面とユーザーとの間の距離を定めて三次元に配置された要素に遠近感を与えます。 z>0 である三次元要素はより大きく、 z<0 である三次元要素はより小さくなります。効果の強度はこのプロパティの値から決められます。 +**`perspective`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 z=0 の平面とユーザーとの間の距離を定めて三次元に配置された要素に遠近感を与えます。 {{EmbedInteractiveExample("pages/css/perspective.html")}} - - -ユーザーの背後にある 3D 要素の部品、つまり z 軸座標が CSS の `perspective` プロパティの値より大きい要素は描画されません。 - -消失点は既定で要素の中心に置かれますが、この位置は {{cssxref("perspective-origin")}} プロパティで変更できます。 - -このプロパティを `0` と `none` 以外の値で使用すると、新たな[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)を生成します。また、その場合、オブジェクトはそれを含む `position: fixed` の要素の包含ブロックとして動作します。 - -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 perspective: none;
 
-/* <length> 値 */
+/*  値 */
 perspective: 20px;
 perspective: 3.5em;
 
 /* グローバル値 */
 perspective: inherit;
 perspective: initial;
+perspecive: revert;
 perspective: unset;
-
+``` -

値

+### 値 - `none` - - : 立体的な変形を一切適用しないことを示すキーワードです。 + - : 立体的な座標変換を一切適用しないことを示すキーワードです。 - `<length>` - - : ユーザーと z=0 平面間の距離を表す {{cssxref("<length>")}} です。立体的な変形を要素とその内容に適用するときに使います。 `0` や負の値ならば、立体的な変形は適用されません。 + - : ユーザーと z=0 平面間の距離を表す {{cssxref("<length>")}} です。立体的な座標変換を要素とその内容に適用するときに使います。 `0` や負の値ならば、立体的な座標変換は適用されません。 -

形式文法

+## 解説 -{{csssyntax}} +z>0 である三次元要素はより大きく、 z<0 である三次元要素はより小さくなります。効果の強度はこのプロパティの値から決められます。 -

例

+ユーザーの背後にある 3D 要素の部品、つまり z 軸座標が CSS の `perspective` プロパティの値より大きい要素は描画されません。 -

視点の設定

+*消失点*は既定で要素の中心に置かれますが、この位置は {{cssxref("perspective-origin")}} プロパティで変更できます。 -この例は様々な位置に視点が設定された立方体を表示します。どのように立方体が早く縮まるかは、 {{ cssxref("perspective") }} プロパティで定義されます。小さい値ほど、視点は近くなります。 +このプロパティを `0` と `none` 以外の値で使用すると、新たな[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)を生成します。また、その場合、オブジェクトはそれを含む `position: fixed` の要素の包含ブロックとして動作します。 -

結果

+## 公式定義 -{{EmbedLiveSample('Setting_perspective', 660, 700)}} +{{cssinfo}} -

HTML

+## 形式文法 + +{{csssyntax}} + +## 例 + +

視点の設定

+ +この例は様々な位置に視点が設定された立方体を表示します。どのように立方体が早く縮まるかは、 {{ cssxref("perspective") }} プロパティで定義されます。小さい値ほど、視点は近くなります。 + +#### HTML 以下の HTML は、４つの同じボックスのコピーを、様々な値の視点を設定して作成します。 -
<table>
-  <tbody>
-    <tr>
-      <th><code>perspective: 250px;</code>
-      </th>
-      <th><code>perspective: 350px;</code>
-      </th>
-    </tr>
-    <tr>
-      <td>
-        <div class="container">
-          <div class="cube pers250">
-            <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>
-      </td>
-      <td>
-        <div class="container">
-          <div class="cube pers350">
-            <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>
-      </td>
-    </tr>
-    <tr>
-      <th><code>perspective: 500px;</code>
-      </th>
-      <th><code>perspective: 650px;</code>
-      </th>
-    </tr>
-    <tr>
-      <td>
-        <div class="container">
-          <div class="cube pers500">
-            <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>
-      </td>
-      <td>
-        <div class="container">
-          <div class="cube pers650">
-            <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>
-      </td>
-    </tr>
-  </tbody>
-</table>
-
- -

CSS

+```html + +  +    +      +      +    +    +      +      +    +    +      +      +    +    +      +      +    +  +
perspective: 250px; +      perspective: 350px; +     
+       
+         
+           
1
+           
2
+           
3
+           
4
+           
5
+           
6
+         
+       
+      		+       
+         
+           
1
+           
2
+           
3
+           
4
+           
5
+           
6
+         
+       
+     
perspective: 500px; +      perspective: 650px; +     
+       
+         
+           
1
+           
2
+           
3
+           
4
+           
5
+           
6
+         
+       
+      		+       
+         
+           
1
+           
2
+           
3
+           
4
+           
5
+           
6
+         
+       
+     
+``` + +#### CSS 様々な距離の遠近法を設定するために使用することができる CSS のクラスです。コンテナーボックスや立方体自身、それぞれの面のためのクラスも含みます。 -
/* さまざまな perspective の値のためのショートハンドクラス */
+```css
+/* さまざまな perspective の値のためのショートハンドクラス */
 .pers250 {
   perspective: 250px;
 }
@@ -222,36 +232,22 @@ th, p, td {
   background-color: #EEEEEE;
   padding: 10px;
   font-family: sans-serif;
-   text-align: left;
-}
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{Specname('CSS Transforms 2', '#propdef-perspective', 'perspective')}}{{Spec2('CSS Transforms 2')}}初回定義。
+ text-align: left; +} +``` -{{cssinfo}} +#### 結果 + +{{EmbedLiveSample('Setting_perspective', 660, 700)}} + +## 仕様書 + +{{Specifications}} -

ブラウザーの対応

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