From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../css/transform-function/translatez()/index.html | 122 +++++++++++++++++++++ 1 file changed, 122 insertions(+) create mode 100644 files/ja/web/css/transform-function/translatez()/index.html (limited to 'files/ja/web/css/transform-function/translatez()/index.html') diff --git a/files/ja/web/css/transform-function/translatez()/index.html b/files/ja/web/css/transform-function/translatez()/index.html new file mode 100644 index 0000000000..75367b6518 --- /dev/null +++ b/files/ja/web/css/transform-function/translatez()/index.html @@ -0,0 +1,122 @@ +--- +title: translateZ() +slug: Web/CSS/transform-function/translateZ() +tags: + - 3D + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +translation_of: Web/CSS/transform-function/translateZ() +--- +
{{CSSRef}}
+ +

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

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

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

+ +

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

+ +
+

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

+
+ +

構文

+ +
translateZ(tz)
+
+ +

値

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

例

+ +

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

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+ +

CSS

+ +
div {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  left: 100px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: perspective(500px) translateZ(200px);
+  background-color: pink;
+}
+
+ +

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

+ +

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

+ +

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

+ +

結果

+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

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