【CSS Modules】scaleX()関数の使い方
scaleX()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
scaleX()関数は、CSSにおいてHTML要素を水平方向（X軸）に拡大または縮小する変形を実行する関数です。この関数はtransformプロパティの値として使用され、要素の見た目の大きさを視覚的に変更できます。
引数には数値を一つ指定し、この数値が要素の元のサイズに対する倍率を表します。例えば、scaleX(1)を指定すると要素は元のサイズのまま表示されます。scaleX(2)と指定すると、要素は元の幅の2倍に拡大されます。逆に、scaleX(0.5)と指定すると、要素は元の幅の半分に縮小されます。0を指定すると要素の幅は0になり、表示されなくなります。
また、引数に負の値を指定することも可能です。scaleX(-1)と指定すると、要素は水平方向の中心を基準にして反転し、元の幅で表示されます。scaleX(-2)と指定した場合は、水平方向に反転しつつ、元の幅の2倍に拡大されます。
scaleX()関数は、要素にマウスオーバーしたときのアニメーションや、レスポンシブデザインにおいて要素の表示を調整する際など、ユーザーインターフェースに動きや変化を持たせるために広く利用されます。他のtransformプロパティ（例: scaleY(), translateX()など）と組み合わせることで、より複雑な変形効果を作り出すことも可能です。この関数を理解することは、動的でインタラクティブなウェブページを作成する上で非常に重要です。
公式リファレンス: scaleX()
構文(syntax)
1transform: scaleX(number);
引数(parameters)
<number>
- <number>: 要素のX軸方向の拡大縮小率を指定する数値。1は元のサイズ、0.5は半分のサイズ、2は2倍のサイズを表します。
戻り値(return)
<transform-function>
要素を水平方向に拡大・縮小する変換関数です。