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="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
<img
class="transition-all"
id="example-element"
src="/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 つ目にパーセント値が使用された場合は、高さからの相対値です。
形式文法
css
translate(<length-percentage>, <length-percentage>?)
例
単一軸を使用した移動
HTML
html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</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>Static</div>
<div class="moved">Moved</div>
<div>Static</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 |
ブラウザーの互換性
Loading…