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/translate3d()/index.md | 179 +++++++++++---------- 1 file changed, 95 insertions(+), 84 deletions(-) (limited to 'files/ja/web/css/transform-function/translate3d()') diff --git a/files/ja/web/css/transform-function/translate3d()/index.md b/files/ja/web/css/transform-function/translate3d()/index.md index 2096870fb1..0d614fbd1a 100644 --- a/files/ja/web/css/transform-function/translate3d()/index.md +++ b/files/ja/web/css/transform-function/translate3d()/index.md @@ -3,71 +3,96 @@ title: translate3d() slug: Web/CSS/transform-function/translate3d() tags: - CSS - - CSS Function - - CSS Transforms - - Function - - Reference + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.translate3d translation_of: Web/CSS/transform-function/translate3d() --- -
{{CSSRef}}
+{{CSSRef}} -

translate3d() は CSS の関数で、要素を 3D 空間内で再配置します。返値は {{cssxref("<transform-function>")}} データ型です。

+**`translate3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を三次元空間内で再配置します。返値は {{cssxref("<transform-function>")}} データ型です。 -
{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}
+{{EmbedInteractiveExample("pages/css/function-translate3d.html")}} - +この変換は三次元ベクトルであることが特徴です。座標は要素がそれぞれの方向にどれだけ移動するかを定義します。 -

この変換は三次元ベクトルであることが特徴です。座標は要素がそれぞれの方向にどれだけ移動するかを定義します。

+## 構文 -

構文

+```css +translate3d(tx, ty, tz) +``` -
translate3d(tx, ty, tz)
-
+### 値 -

値

- -
-
tx
-
変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。
-
ty
-
変換ベクトルの縦座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。
-
tz
-
変換ベクトルの z 成分を表す {{cssxref("<length>")}} です。 {{cssxref("<percentage>")}} 値は指定できません。この場合、これを含む変換は無効とされます。
-
+- `tx` + - : 変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。 +- `ty` + - : 変換ベクトルの縦座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。 +- `tz` + - : 変換ベクトルの z 成分を表す {{cssxref("<length>")}} です。 {{cssxref("<percentage>")}} 値は指定できません。この場合、これを含む座標変換は無効とされます。 - - - - - - - - - - - - - - - + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
-

ℝ2 では線形変換ではないので、デカルト座標の行列で表すことはできない。

- 		ℝ3 では線形変換ではないので、デカルト座標の行列で表すことはできない。 100tx010ty001tz0001
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+

+ ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 +

+ 		+ ℝ^3 では線形変換ではないので、デカルト座標の行列で表すことはできない。 + + 1 0 0 tx 0 1 0 ty 0 0 1 tz 0 0 0 1 +
-

例

+## 例 -

単一軸を使用した変換

+

単一軸の座標変換の使用

-

HTML

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

CSS

+#### CSS -
div {
+```css
+div {
   width: 60px;
   height: 60px;
   background-color: skyblue;
@@ -78,23 +103,26 @@ translation_of: Web/CSS/transform-function/translate3d()
   transform: perspective(500px) translate3d(10px, 0, 0px);
   background-color: pink;
 }
-
+``` -

結果

+#### 結果 -

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

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

z 軸と x 軸を組み合わせた変換

+

z 軸と x 軸を組み合わせた座標変換

-

HTML

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

CSS

+#### CSS -
div {
+```css
+div {
   width: 60px;
   height: 60px;
   background-color: skyblue;
@@ -104,38 +132,21 @@ translation_of: Web/CSS/transform-function/translate3d()
   transform: perspective(500px) translate3d(10px, 0, 100px);
   background-color: pink;
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}}

+{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}} -

仕様書

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

ブラウザーの互換性

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

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

+{{Compat}} -

関連情報

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