【CSS Modules】translateY()関数の使い方
translateY()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
translateY()関数は、ウェブページ上のHTML要素を垂直方向、つまり上下に移動させる視覚的な変換を実行する関数です。この関数はCSSのtransformプロパティの値として指定され、要素の実際のレイアウト空間を変更することなく、表示上の位置のみを調整することができます。これにより、要素が移動しても周囲の要素の位置がずれることはなく、スムーズなアニメーションやレイアウト調整を効率的に実現できます。
translateY()関数は、移動させたい距離を指定する単一の引数を取ります。この引数には、ピクセル（px）、親要素に対するパーセンテージ（%）、em、remなど、CSSで利用可能な様々な長さ単位を使用できます。例えば、transform: translateY(20px);と記述すると、対象の要素は元の位置から下に20ピクセル移動します。逆に、transform: translateY(-50%);と記述すれば、要素の高さの半分だけ上方向に移動します。正の値を指定すると要素は下方向へ、負の値を指定すると要素は上方向へ移動します。
この関数は、要素がマウスカーソルを合わせたときにわずかに浮き上がるようなホバーエフェクトや、メニュー項目が画面の端からスライドインしてくるようなアニメーションなど、インタラクティブなユーザーインターフェースの作成において特に有用です。translateY()は2次元空間での垂直方向の移動に特化しており、水平方向に移動させるtranslateX()関数や、両方向に移動させるtranslate()関数と組み合わせて使うことも可能です。これにより、視覚的に魅力的で動的なウェブコンテンツを、高いパフォーマンスを保ちながら開発することができます。
構文(syntax)
1.element { 2 transform: translateY(100px); 3}
引数(parameters)
- <length-percentage>: 要素を縦方向に移動させる距離を指定します。
px（ピクセル）のような絶対値、または親要素に対する割合（%）で指定できます。
戻り値(return)
戻り値なし
戻り値はありません