このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
translate
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2022年8月以降、すべてのブラウザーで利用可能です。
translate は CSS のプロパティで、平行移動の座標変換を独自に、 transform プロパティから独立して指定することができます。これは一般的なユーザーインターフェイスの用途に適しており、 transform の値で指定する変換関数を正確に思い出す必要がなくなります。
試してみましょう
translate: none;
translate: 40px;
translate: 50% -40%;
translate: 20px 4rem;
translate: 20px 4rem 150px;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</section>
#default-example {
background: linear-gradient(skyblue, khaki);
perspective: 800px;
perspective-origin: 150% 150%;
}
#example-element {
width: 100px;
height: 100px;
perspective: 550px;
transform-style: preserve-3d;
}
.face {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
font-size: 60px;
color: white;
}
.front {
background: rgb(90 90 90 / 0.7);
transform: translateZ(50px);
}
.back {
background: rgb(0 210 0 / 0.7);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(210 0 0 / 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 210 / 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(210 210 0 / 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(210 0 210 / 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
構文
/* キーワード値 */
translate: none;
/* 単一の値 */
translate: 100px;
translate: 50%;
/* 二つの値 */
translate: 100px 200px;
translate: 50% 105px;
/* 三つの値 */
translate: 50% 105px 5rem;
/* グローバル値 */
translate: inherit;
translate: initial;
translate: revert;
translate: revert-layer;
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 =
none |
<length-percentage> [ <length-percentage> <length> ? ] ?
<length-percentage> =
<length> |
<percentage>
例
ホバー時に要素を移動
この例では、 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;
}
結果
仕様書
| 仕様書 |
|---|
| CSS Transforms Module Level 2 # individual-transforms |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。
関連情報
メモ: skew には独立した transform の値はありません