1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. 値
  5. <transform-function>
  6. translate()

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

translate()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

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

試してみましょう

transform: translate(0);

transform: translate(42px, 18px);

transform: translate(-2.1rem, -2ex);

transform: translate(3ch, 3mm);

<section id="default-example">
  <img
    class="transition-all"
    id="static-element"
    src="/proxy/developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
  <img
    class="transition-all"
    id="example-element"
    src="/proxy/developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

#static-element {
  opacity: 0.4;
  position: absolute;
}

#example-element {
  position: absolute;
}

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

構文

css
/* 単一の <length-percentage> 値 */
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

この値は <length> または <percentage> で、変換ベクトルの横軸 (水平方向、X 成分) を表します。変換ベクトルの縦軸 (垂直方向、Y 成分) は 0 に設定されます。例えば、 translate(2px) は translate(2px, 0) と等価です。パーセント値の場合は、 transform-box で定義される参照ボックスの幅からの相対値です。

二つの <length-percentage> 値

この値は 2 つの <length> または <percentage> 値で、変換ベクトルの横軸 (水平方向、X 座標) と縦軸 (垂直方向、Y 座標) を表します。1 つ目にパーセント値が使用された場合は、 transform-box で定義された参照ボックスの幅からの相対値で、2 つ目にパーセント値が使用された場合は、高さからの相対値です。

直交座標系 (ℝ^2) 同次座標系 (ℝℙ^2) 直交座標系 (ℝ^3) 同次座標系 (ℝℙ^3)

ℝ^2 では線形変換ではないので、直交座標の行列で表すことはできません。

(10tx01ty001)\left( \begin{array}{ccc} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{array} \right)
(10tx01ty001)\left( \begin{array}{ccc} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{array} \right)
(100tx010ty00100001)\left( \begin{array}{cccc} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)
[1 0 0 1 tx ty]

形式文法

<translate()> = 
  translate( <length-percentage> , <length-percentage>? )  

<length-percentage> = 
  <length>      |
  <percentage>

例

単一軸を使用した移動

HTML

html
<div>静的</div>
<div class="moved">移動</div>
<div>静的</div>

CSS

css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  /* translateX(10px) または translate(10px, 0) と同じ */
  transform: translate(10px);
  background-color: pink;
}

結果

Y 軸と X 軸の移動の組み合わせ

HTML

html
<div>静的</div>
<div class="moved">移動</div>
<div>静的</div>

CSS

css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translate(10px, 10px);
  background-color: pink;
}

結果

仕様書

Specification
CSS Transforms Module Level 1
# funcdef-transform-translate

ブラウザーの互換性

関連情報

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content