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/translate()/index.md | 222 +++++++++++++-------- 1 file changed, 134 insertions(+), 88 deletions(-) (limited to 'files/ja/web/css/transform-function/translate()') diff --git a/files/ja/web/css/transform-function/translate()/index.md b/files/ja/web/css/transform-function/translate()/index.md index 01b7d7e801..e3b28bdc1a 100644 --- a/files/ja/web/css/transform-function/translate()/index.md +++ b/files/ja/web/css/transform-function/translate()/index.md @@ -3,84 +3,144 @@ title: translate() slug: Web/CSS/transform-function/translate() tags: - CSS - - CSS Function - - CSS Transforms - - Function - - Reference + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +browser-compat: css.types.transform-function.translate translation_of: Web/CSS/transform-function/translate() --- -
{{CSSRef}}
+{{CSSRef}} -

translate() は CSS の関数は、要素を水平方向や垂直方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。

+**`translate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を水平方向や垂直方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 -

+![](translate.png) -

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

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

構文

+## 構文 -
/* 単一の <length-percentage> 値 */
+```css
+/* 単一の  値 */
 transform: translate(200px);
 transform: translate(50%);
 
-/* 二つの <length-percentage> 値 */
+/* 二つの  値 */
 transform: translate(100px, 200px);
 transform: translate(100px, 50%);
 transform: translate(30%, 200px);
 transform: translate(30%, 50%);
-
+``` -

値

+### 値 -
-
単一の <length-percentage> values
-
この値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} で、変換ベクトルの横軸 (水平方向、X 座標) を表します。変換ベクトルの縦軸 (垂直方向、Y 座標) は 0 に設定されます。例えば、 translate(2) は translate(2, 0) と等価です。パーセント値の場合は、 {{cssxref("transform-box")}} で定義される参照ボックスの幅からの相対値です。
-
二つの <length-percentage> 値
-
この値は2つの {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値で、変換ベクトルの横軸 (水平方向、X 座標) と縦軸 (垂直方向、Y 座標) を表します。1つ目にパーセント値が使用された場合は、 {{cssxref("transform-box")}} で定義された参照ボックスの幅からの相対値で、2つ目にパーセント値が使用された場合は、高さからの相対値です。
-
+- 単一の `` values + - : この値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} で、変換ベクトルの横軸 (水平方向、X 座標) を表します。変換ベクトルの縦軸 (垂直方向、Y 座標) は `0` に設定されます。例えば、 `translate(2)` は `translate(2, 0)` と等価です。パーセント値の場合は、 {{cssxref("transform-box")}} で定義される参照ボックスの幅からの相対値です。 +- 二つの `` 値 + - : この値は 2 つの {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値で、変換ベクトルの横軸 (水平方向、X 座標) と縦軸 (垂直方向、Y 座標) を表します。1 つ目にパーセント値が使用された場合は、 {{cssxref("transform-box")}} で定義された参照ボックスの幅からの相対値で、2 つ目にパーセント値が使用された場合は、高さからの相対値です。 - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
ℝ2 のデカルト座標ℝℙ2 の同次座標ℝ3 のデカルト座標ℝℙ3 の同次座標
-

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

- 		10tx01ty001 10tx01ty001 100tx010ty00100001
[1 0 0 1 tx ty]
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+

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

+ 		+ 1 0 tx 0 1 ty 0 0 1 + + 1 0 tx 0 1 ty 0 0 1 + + 1 0 0 tx 0 1 0 ty 0 0 1 0 0 0 0 1 +
[1 0 0 1 tx ty]
-

形式文法

+### 形式文法 -
translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}?)
-
+```css +translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}?) +``` -

例

+## 例 -

単一軸を使用した変形

+

単一軸を使用した変形

-

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;
@@ -90,23 +150,26 @@ transform: translate(30%, 50%);
   transform: translate(10px); /* translateX(10px) または translate(10px, 0) と同じ */
   background-color: pink;
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}

+{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}} -

Y 軸と X 軸の変換の組み合わせ

+

Y 軸と 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;
@@ -116,38 +179,21 @@ transform: translate(30%, 50%);
   transform: translate(10px, 10px);
   background-color: pink;
 }
-
+``` -

結果

+#### 結果 -

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

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

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}{{Spec2('CSS3 Transforms')}}初回定義
+{{Specifications}} -

ブラウザーの互換性

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

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

+{{Compat}} -

関連情報

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