【CSS Modules】scaleY()関数の使い方
scaleY()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
scaleY()関数は、CSSのtransformプロパティで使用され、HTML要素を垂直方向（Y軸方向）に拡大または縮小する機能を提供する関数です。この関数を用いることで、要素の元の高さに対して、指定した比率で高さを変更できます。
引数には、拡大または縮小の倍率を表す数値を指定します。例えば、scaleY(2)と指定すると、要素の高さは元の2倍になります。同様に、scaleY(0.5)と指定すると、高さは元の半分に縮小されます。scaleY(1)を指定した場合は、要素の高さは元のサイズから変化しません。パーセンテージ（例: scaleY(50%)）で指定することも可能で、これはscaleY(0.5)と同じ効果を持ちます。
また、負の値を指定することもできます。例えば、scaleY(-1)とすると、要素がY軸方向に反転（ミラーリング）された状態で表示されます。これは、要素を上下逆さまに表示したい場合などに役立ちます。
scaleY()関数は、要素の幅には影響を与えず、高さのみを変形させます。この変形は、要素の見た目だけを変更し、要素が占めるレイアウト上の空間（ボックスモデルのサイズ）は変わりません。そのため、他の要素の配置に影響を与えることなく、視覚的な拡大・縮小効果を適用できるのが特徴です。アニメーションやトランジションと組み合わせることで、要素の滑らかな拡大・縮小や反転を動的に表現でき、リッチなユーザーインターフェースの構築に貢献します。
構文(syntax)
1transform: scaleY(<number>);
引数(parameters)
sy: <number>
- sy: <number>: Y軸方向の拡大・縮小率を指定する数値
戻り値(return)
scaleY() 関数は、要素のY軸方向の拡大縮小を表す <transform-function> 型の値を返します。この値は、CSSの transform プロパティに指定することで、要素を縦方向に変形させることができます。