CSS translate 属性

定義と使用方法

translate 属性は、要素の位置を変更することができます。

translate 属性は、要素が二つの空間内でのx軸とy軸座標を定義します。z軸座標を定義することで、三つの空間内での位置を変更することもできます。

座標は、x軸座標のみ、x軸とy軸座標、またはx軸、y軸、z軸座標で提供できます。

よりよく理解するために、 translate 属性については、デモ。

ヒント：z軸属性が効果を発揮するためには、CSS perspective 属性に値を定義する必要があります。

注意：要素を平移するもう一つの技術は、 CSS translate() 函数このページの CSS transform 属性は、要素を平移するためのよりシンプルで直接的な方法です。

要素の位置を変更します：

div {
  translate: 100px 20px;
}

z軸を設定する場合、 translate 属性を設定する場合、親要素にも設定する必要があります perspective 属性がなければ、効果は見られません：

DIV1 {
  perspective: 200px;
}
DIV2 {
  translate: 50px 50px 50px;
}

translate: x-axis y-axis z-axis|initial|inherit;

値	説明
x-axis	x軸上の位置を定義します。可能な値：長さパーセンテージ
y-axis	y軸上の位置を定義します。可能な値：長さパーセンテージ
z-axis	z軸上の位置を定義します。可能な値：長さパーセンテージ
initial	この属性をデフォルト値に設定します。参照してください initial。
inherit	親要素からこの属性を継承します。参照してください inherit。

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

クローム	エッジ	ファイアフォックス	サファリ	オペラ
104	104	72	14.1	90