このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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> <img src="/shared-assets/images/examples/firefox-logo.svg" width="200" /> <img 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 つ目にパーセント値が使用された場合は、高さからの相対値です。
形式文法
<translate()> =
translate(<length-percentage> ,<length-percentage>?)
<length-percentage> =
<length>|
<percentage>
例
単一軸を使用した移動
HTML
html
<div>静的</div><div>移動</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>移動</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 |