【CSS Modules】translateプロパティの使い方

translateプロパティは、CSSでHTML要素の位置を平行移動させるための値を保持するプロパティです。このプロパティは、要素をX軸、Y軸、そしてZ軸に沿って移動させる機能を持ち、主に2Dまたは3D空間での要素の配置調整に利用されます。

通常、要素の移動はtransformプロパティを用いてtransform: translate(x, y)のように記述されますが、translateプロパティは、そのtransformプロパティのtranslate()関数部分をより簡潔に記述するためのショートハンドとして導入されました。これにより、例えばtranslate: 10px 20px;と記述するだけで、要素をX軸方向に10ピクセル、Y軸方向に20ピクセル移動させることができます。3Dでの移動を指定する場合は、translate: 10px 20px 5px;のようにZ軸方向の値も追加で指定可能です。

値は、ピクセル（px）やem、remといった絶対的・相対的な長さの単位、またはパーセンテージ（%）で指定できます。パーセンテージで指定した場合、要素自身の幅や高さに対する相対的な移動量が適用されます。このプロパティを使用することで、アニメーションやユーザーインターフェースにおける動的な要素の配置変更を効率的かつ直感的に行うことが可能になります。また、個別の軸に特化したtranslateX、translateY、translateZプロパティも存在し、これらも同様に要素の平行移動に寄与します。

Copy
1translate: 100px 50px;

引数なし

引数はありません

戻り値なし

戻り値はありません