From 9bf6693b2edd5281c1577856895c55653a41dc01 Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Mar 2022 00:13:08 +0000 Subject: [CRON] sync translated content --- .../web/css/transform-function/translate/index.md | 200 +++++++++++++++++++++ 1 file changed, 200 insertions(+) create mode 100644 files/ja/web/css/transform-function/translate/index.md (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 new file mode 100644 index 0000000000..0af964a8c0 --- /dev/null +++ b/files/ja/web/css/transform-function/translate/index.md @@ -0,0 +1,200 @@ +--- +title: translate() +slug: Web/CSS/transform-function/translate +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/translate() +original_slug: Web/CSS/transform-function/translate() +browser-compat: css.types.transform-function.translate +--- +{{CSSRef}} + +**`translate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を水平方向や垂直方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +![](translate.png) + +この変換は、二次元ベクトルであることが特徴です。それぞれの方向にどれだけ要素が移動するかの座標を定義します。 + +## 構文 + +```css +/* 単一の 値 */ +transform: translate(200px); +transform: translate(50%); + +/* 二つの 値 */ +transform: translate(100px, 200px); +transform: translate(100px, 50%); +transform: translate(30%, 200px); +transform: translate(30%, 50%); +``` + +### 値 + +- 単一の `` 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 では線形変換ではないので、デカルト座標の行列で表すことはできない。 +

+ 		+ 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]
+ +### 形式文法 + +```css +translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}?) +``` + +## 例 + +

単一軸を使用した変形

+ +#### HTML + +```html +
Static
+
Moved
+
Static
+``` + +#### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translate(10px); /* translateX(10px) または translate(10px, 0) と同じ */ + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}} + +

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

+ +#### HTML + +```html +
Static
+
Moved
+
Static
+``` + +#### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translate(10px, 10px); + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} -- cgit v1.2.3-54-g00ecf