From a81cea7d8b08d1765dcc5ea62e6238dd1d596a05 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 23 Nov 2021 02:21:04 +0900 Subject: CSS 座標変換関数のリファレンスを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/21 時点の英語版に同期 --- .../css/transform-function/translatez()/index.md | 155 +++++++++++---------- 1 file changed, 81 insertions(+), 74 deletions(-) (limited to 'files/ja/web/css/transform-function/translatez()') diff --git a/files/ja/web/css/transform-function/translatez()/index.md b/files/ja/web/css/transform-function/translatez()/index.md index 75367b6518..400c67a02f 100644 --- a/files/ja/web/css/transform-function/translatez()/index.md +++ b/files/ja/web/css/transform-function/translatez()/index.md @@ -4,70 +4,93 @@ slug: Web/CSS/transform-function/translateZ() tags: - 3D - CSS - - CSS Function - - CSS Transforms - - Function - - Reference + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.translateZ translation_of: Web/CSS/transform-function/translateZ() --- -
{{CSSRef}}
+{{CSSRef}} -

translateZ() CSS 関数は、3 次元空間の z 軸に沿って、すなわちビューアーに近づくまたは遠ざかって、要素を移動させます。その結果は {{cssxref("<transform-function>")}} データ型となります。

+**`translateZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、三次元空間の z 軸に沿って、すなわち閲覧者に近づいたり遠ざかったりするように要素を移動させます。その結果は {{cssxref("<transform-function>")}} データ型となります。 -
{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}
+{{EmbedInteractiveExample("pages/css/function-translateZ.html")}} - +この変換は、 {{cssxref("<length>")}} によって定義され、要素または要素がどれだけ内側または外側に移動するかを指定します。 -

この変換は、 {{cssxref("<length>")}} によって定義され、要素または要素がどれだけ内側または外側に移動するかを指定します。

+上記のデモでは、[`perspective: 550px;`](/ja/docs/Web/CSS/perspective) (三次元空間を作るため) と [`transform-style: preserve-3d;`](/ja/docs/Web/CSS/transform-style) (立方体の 6 つの面である子を三次元空間に配置) を立方体に設定しました。 -

上記のデモでは、 perspective: 550px; (3D空間を作成するため) と transform-style. preserve-3d; (従って、子つまり立方体の6辺も3D空間に配置されています) が、立方体に設定されています。

+> **Note:** `translateZ(tz)` は、`translate3d(0, 0, tz)` と等価です。 -
-

注: translateZ(tz) は、translate3d(0, 0, tz) と等価です。

-
+## 構文 -

構文

+```css +translateZ(tz) +``` -
translateZ(tz)
-
+### 値 -

値

- -
-
tz
-
変換ベクトルの z 成分を表す{{cssxref("<length>")}}。正の値では要素がビューアーに向かって移動し、負の値で移動すると遠ざかります。
-
+- `tz` + - : 変換ベクトルの z 成分を表す{{cssxref("<length>")}}。正の値では要素が閲覧者に向かって移動し、負の値で移動すると遠ざかります。 - - - - - - - - - - - - - - - + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
この変換は 3 次元空間に適用されます。平面上では表現できません。この変換は ℝ3 の線形変換ではなく、デカルト座標系の行列では表現できません。 10000100001t0001
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+ この変換は 3 次元空間に適用されます。平面上では表現できません。 + + この変換は ℝ^3 の線形変換ではなく、デカルト座標系の行列では表現できません。 + + 1 0 0 0 0 1 0 0 0 0 1 t 0 0 0 1 +
-

例

+

例

-

この例では、2 つのボックスが作成されます。 1 つは通常変換されずにページ上に配置されます。 2 番目の方法は、3D 空間を作成するためのパースペクティブを適用して変更し、ユーザーに向かって移動します。

+この例では、2 つのボックスが作成されます。1 つはページ上で通常の位置に配置され、座標変換されることはありません。もう一つは、遠近法を適用して三次元空間を作り、ユーザーの方に移動させます。 -

HTML

+### HTML -
<div>Static</div>
-<div class="moved">Moved</div>
+```html +
Static
+
Moved
+``` -

CSS

+### CSS -
div {
+```css
+div {
   position: relative;
   width: 60px;
   height: 60px;
@@ -79,44 +102,28 @@ translation_of: Web/CSS/transform-function/translateZ()
   transform: perspective(500px) translateZ(200px);
   background-color: pink;
 }
-
+``` -

本当にここで重要なのは、class "moved" です。それが何をするかを見てみましょう。 まず、perspective() 関数は、ビューアーを、z=0 (本質的にスクリーンの表面) にある平面に対してビューアーを配置します。500px の値は、ユーザーが z=0 にある画像の「正面」に 500 ピクセルあることを意味します。

+ここで重要なのは "moved" というクラスで、その機能を見てみましょう。まず、 +[`perspective()`](/ja/docs/Web/CSS/transform-function/perspective()) 関数は、 z=0 の位置にある平面 (要するに画面の表面) の相対位置に閲覧者を位置付けます。 `500px` という値は、ユーザーが z=0 にある画像の 500 ピクセル「前」にいることを意味します。 -

次に、translateZ() 関数は、要素を画面からユーザーの方に「外向きに」200 ピクセル移動します。 これは、2D ディスプレイ上で見たときに要素を大きく見せる、または VR ヘッドセットや他の 3D ディスプレイデバイスを使用して見たときに要素をより近く見せるという効果があります。

+次に、`translateZ()` 関数は、要素を画面からユーザーの方に「外向きに」200 ピクセル移動します。 これは、二次元のディスプレイ上で見たときに要素を大きく見せる、または VR ヘッドセットや他の三次元ディスプレイ機器を使用して見たときに要素をより近く見せるという効果があります。 -

なお、 perspective() の値が translateZ() の値よりも小さい場合、例えば transform: perspective(200px) translateZ(300px); の場合、変換された要素はユーザーのビューポートよりも手前にあるため、表示されません。 perspective と translateZ の値の差が小さければ小さいほど、ユーザーは要素に近づき、変換された要素は大きく見えます。

+なお、 `perspective()` の値が `translateZ()` の値よりも小さい場合、例えば `transform: perspective(200px) translateZ(300px);` の場合、変換された要素はユーザーのビューポートよりも手前にあるため、表示されません。 perspective と translateZ の値の差が小さければ小さいほど、ユーザーは要素に近づき、変換された要素は大きく見えます。 -

結果

+### 結果 -

{{EmbedLiveSample("Examples", 250, 250)}}

+{{EmbedLiveSample("Examples", 250, 250)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}3D 変換関数を CSS Transforms 標準に追加。
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} -- cgit v1.2.3-54-g00ecf