From 3c18a8fbac3cbd3c3ff0d9719292131c8bd3c8cb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 21 Nov 2021 22:56:20 +0900 Subject: transform-function の座標変換関数を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../transform-function/perspective()/index.html | 158 --------------------- .../css/transform-function/perspective()/index.md | 158 +++++++++++++++++++++ 2 files changed, 158 insertions(+), 158 deletions(-) delete mode 100644 files/ja/web/css/transform-function/perspective()/index.html create mode 100644 files/ja/web/css/transform-function/perspective()/index.md (limited to 'files/ja/web/css/transform-function/perspective()') diff --git a/files/ja/web/css/transform-function/perspective()/index.html b/files/ja/web/css/transform-function/perspective()/index.html deleted file mode 100644 index ba64284843..0000000000 --- a/files/ja/web/css/transform-function/perspective()/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: perspective() -slug: Web/CSS/transform-function/perspective() -tags: - - CSS - - CSS 変換 - - CSS 関数 - - Reference -translation_of: Web/CSS/transform-function/perspective() ---- -
{{CSSRef}}
- -

CSS の perspective() 関数は、ユーザーと z=0 平面との間の距離を定義し、閲覧者からの視点は二次元のインターフェイスが三次元であったかのようになります。結果は {{cssxref("<transform-function>")}} データ型になります。

- -
{{EmbedInteractiveExample("pages/css/function-perspective.html")}}
- - - -

perspective() 変形関数は、変形される要素に適用される {{cssxref('transform')}} 値の一部です。これは {{cssxref('perspective')}} および {{cssxref('perspective-origin')}} の各プロパティが三次元空間に変形される子の親に付けられるのとは異なります。

- -

構文

- -

perspective() を使用してしている視点距離は {{cssxref("<length>")}} 値で指定し、ユーザーと z=0 平面との間の距離を表します。 z=0 平面は二次元で表示されるすべてのものが表示される平面であり、または画面の平面です。正の数を指定すると、要素はインターフェイスの他のものよりもユーザーの近くに表示され、負の数を指定すると、遠くに表示されます。値がより大きくなるほど、ユーザーの視点は遠ざかります。

- -
perspective(d)
-
- -

値

- -
-
d
-
{{cssxref("<length>")}} で、ユーザーと z=0 平面との間の距離を表します。 0 または負の数であった場合は、距離の変換は適用されません。
-
- - - - - - - - - - - - - - - - - -
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
-

この変換は三次元空間に適用され、平面で表現することはできません。

- 		この変換は ℝ3 では線形変換ではないので、デカルト座標行列を使用して表現することはできません。 10000100001000−1/d1
- -

例

- -

HTML

- -
<p>Without perspective:</p>
-<div class="no-perspective-box">
-  <div class="face front">A</div>
-  <div class="face top">B</div>
-  <div class="face left">C</div>
-</div>
-
-<p>With perspective (9cm):</p>
-<div class="perspective-box-far">
-  <div class="face front">A</div>
-  <div class="face top">B</div>
-  <div class="face left">C</div>
-</div>
-
-<p>With perspective (4cm):</p>
-<div class="perspective-box-closer">
-  <div class="face front">A</div>
-  <div class="face top">B</div>
-  <div class="face left">C</div>
-</div>
-
- -

CSS

- -
.face {
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  line-height: 100px;
-  font-size: 100px;
-  text-align: center;
-}
-
-p + div {
-  width: 100px;
-  height: 100px;
-  transform-style: preserve-3d;
-  margin-left: 100px;
-}
-.no-perspective-box {
-  transform: rotateX(-15deg) rotateY(30deg);
-}
-
-.perspective-box-far {
-  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
-}
-
-.perspective-box-closer {
-  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
-}
-
-.top {
-  background-color: skyblue;
-  transform: rotateX(90deg) translate3d(0, 0, 50px);
-}
-
-.left {
-  background-color: pink;
-  transform: rotateY(-90deg) translate3d(0, 0, 50px);
-}
-
-.front {
-  background-color: limegreen;
-  transform: translate3d(0, 0, 50px);
-}
-
- -

結果

- -

{{ EmbedLiveSample('Examples', '250', '350') }}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Transforms 2", "#funcdef-perspective", "perspective()")}}{{Spec2("CSS Transforms 2")}}初回定義
- -

ブラウザーの互換性

- -

<transform-function> データ型の互換性情報をご覧ください。

- -

関連情報

- - diff --git a/files/ja/web/css/transform-function/perspective()/index.md b/files/ja/web/css/transform-function/perspective()/index.md new file mode 100644 index 0000000000..ba64284843 --- /dev/null +++ b/files/ja/web/css/transform-function/perspective()/index.md @@ -0,0 +1,158 @@ +--- +title: perspective() +slug: Web/CSS/transform-function/perspective() +tags: + - CSS + - CSS 変換 + - CSS 関数 + - Reference +translation_of: Web/CSS/transform-function/perspective() +--- +
{{CSSRef}}
+ +

CSS の perspective() 関数は、ユーザーと z=0 平面との間の距離を定義し、閲覧者からの視点は二次元のインターフェイスが三次元であったかのようになります。結果は {{cssxref("<transform-function>")}} データ型になります。

+ +
{{EmbedInteractiveExample("pages/css/function-perspective.html")}}
+ + + +

perspective() 変形関数は、変形される要素に適用される {{cssxref('transform')}} 値の一部です。これは {{cssxref('perspective')}} および {{cssxref('perspective-origin')}} の各プロパティが三次元空間に変形される子の親に付けられるのとは異なります。

+ +

構文

+ +

perspective() を使用してしている視点距離は {{cssxref("<length>")}} 値で指定し、ユーザーと z=0 平面との間の距離を表します。 z=0 平面は二次元で表示されるすべてのものが表示される平面であり、または画面の平面です。正の数を指定すると、要素はインターフェイスの他のものよりもユーザーの近くに表示され、負の数を指定すると、遠くに表示されます。値がより大きくなるほど、ユーザーの視点は遠ざかります。

+ +
perspective(d)
+
+ +

値

+ +
+
d
+
{{cssxref("<length>")}} で、ユーザーと z=0 平面との間の距離を表します。 0 または負の数であった場合は、距離の変換は適用されません。
+
+ + + + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
+

この変換は三次元空間に適用され、平面で表現することはできません。

+ 		この変換は ℝ3 では線形変換ではないので、デカルト座標行列を使用して表現することはできません。 10000100001000−1/d1
+ +

例

+ +

HTML

+ +
<p>Without perspective:</p>
+<div class="no-perspective-box">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+<p>With perspective (9cm):</p>
+<div class="perspective-box-far">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+<p>With perspective (4cm):</p>
+<div class="perspective-box-closer">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+ +

CSS

+ +
.face {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  font-size: 100px;
+  text-align: center;
+}
+
+p + div {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  margin-left: 100px;
+}
+.no-perspective-box {
+  transform: rotateX(-15deg) rotateY(30deg);
+}
+
+.perspective-box-far {
+  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
+}
+
+.perspective-box-closer {
+  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
+}
+
+.top {
+  background-color: skyblue;
+  transform: rotateX(90deg) translate3d(0, 0, 50px);
+}
+
+.left {
+  background-color: pink;
+  transform: rotateY(-90deg) translate3d(0, 0, 50px);
+}
+
+.front {
+  background-color: limegreen;
+  transform: translate3d(0, 0, 50px);
+}
+
+ +

結果

+ +

{{ EmbedLiveSample('Examples', '250', '350') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Transforms 2", "#funcdef-perspective", "perspective()")}}{{Spec2("CSS Transforms 2")}}初回定義
+ +

ブラウザーの互換性

+ +

<transform-function> データ型の互換性情報をご覧ください。

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf