【CSS Modules】translate()関数の使い方
translate()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
translate()関数は、ウェブページ上のHTML要素を、その元の位置から水平方向（X軸）、垂直方向（Y軸）、および奥行き方向（Z軸）に移動させる変形を実行する関数です。これはCSSのtransformプロパティの値として使用され、要素の視覚的な位置を変更するために利用されます。
この関数にはいくつかのバリエーションが存在します。例えば、translate(tx, ty)と記述することで、要素をX軸方向にtx、Y軸方向にtyだけ移動させることができます。引数にはpx、em、%などの長さの単位を指定し、移動距離を定義します。単一の軸のみを移動させたい場合は、translateX(tx)でX軸方向、translateY(ty)でY軸方向へそれぞれ移動させることが可能です。
要素を3次元空間で奥行き方向（Z軸）に移動させたい場合はtranslateZ(tz)を使用します。複数の軸にわたって3次元的な移動を行うには、translate3d(tx, ty, tz)という形式も利用でき、X軸、Y軸、Z軸それぞれの移動距離を一度に指定できます。
translate関数による移動は、要素のレイアウトフローには影響を与えません。つまり、要素は視覚的に移動したかのように見えますが、他の要素はあたかも元の位置に要素が存在するかのように配置され、移動した要素によって周囲のレイアウトが押し出されたり、スペースが作られたりすることはありません。この特性は、要素を他の要素の配置に影響を与えることなく動かしたい場合や、アニメーション効果を適用する際に非常に有効です。
公式リファレンス: translate()
構文(syntax)
1transform: translate(50px, 100px);
引数(parameters)
tx, ty = 0
- tx: 要素を水平方向に移動させる距離（ピクセル単位）。
- ty: 要素を垂直方向に移動させる距離（ピクセル単位）。デフォルト値は0です。
戻り値(return)
戻り値なし
戻り値はありません