translate
Baseline 2022
Newly available
Since August 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
translate
は CSS のプロパティで、平行移動の座標変換を独自に、 transform
プロパティから独立して指定することができます。これは一般的なユーザーインターフェイスの用途に適しており、 transform
の値で指定する変換関数を正確に思い出す必要がなくなります。
試してみましょう
構文
/* キーワード値 */
translate: none;
/* 単一の値 */
translate: 100px;
translate: 50%;
/* 二つの値 */
translate: 100px 200px;
translate: 50% 105px;
/* 三つの値 */
translate: 50% 105px 5rem;
/* グローバル値 */
translate: inherit;
translate: initial;
translate: revert;
translate: unset;
値
- 単一の
<length-percentage>
値 -
単一の
<length>
または<percentage>
値で、 X 軸方向の平行移動を指定します。translate()
(2D の平行移動)関数に単一の値を指定したものと同等です。 - 2 つの
<length-percentage>
値 -
2 つの
<length>
または<percentage>
値で、 2D の平行移動における X および Y 軸方向の移動量を (それぞれ) 指定します。translate()
(2D の平行移動)関数に 2 つの値を指定したものと同等です。 - 3 つの値
-
2 つの
<length-percentage>
値と 1 つの<length>
値で、 3D の平行移動における X, Y, Z 軸の移動量を(それぞれ)指定します。translate3d()
(3D の平行移動)関数と同等です。 none
-
平行移動が適用されないことを指定します。
公式定義
初期値 | none |
---|---|
適用対象 | 座標変換可能要素 |
継承 | なし |
パーセント値 | 囲みボックスの寸法に対する相対値 |
計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
アニメーションの種類 | 座標変換 |
重ね合わせコンテキストの生成 | あり |
形式文法
例
ホバー時に要素を移動
この例では、 translate
プロパティを使用して要素を 3 軸で移動させる方法を示します。
1 つ目のボックスは X 軸に沿って移動され、 2 つ目のボックスは X 軸と Y 軸に沿って移動されます。
3 つ目のボックスは X 軸、Y 軸、Z 軸に沿って移動し、親要素に perspective
が追加されているため、閲覧者に向かって移動しているように見えます。
HTML
<div class="wrapper">
<div id="box1">translate X</div>
<div id="box2">translate X,Y</div>
<div id="box3">translate X,Y,Z</div>
</div>
CSS
.wrapper {
perspective: 100px;
display: inline-flex;
gap: 1em;
}
.wrapper > div {
width: 7em;
line-height: 7em;
text-align: center;
transition: 0.5s ease-in-out;
border: 3px dotted;
}
#box1:hover {
translate: 20px;
}
#box2:hover {
translate: 20px 20px;
}
#box3:hover {
translate: 5px 5px 30px;
}
結果
仕様書
Specification |
---|
CSS Transforms Module Level 2 # individual-transforms |
ブラウザーの互換性
BCD tables only load in the browser