CSS3のscaleX()メソッドでX軸方向に要素を拡大・縮小する方法

CSS3の scaleX(x) メソッドは、X軸（横）方向を基準として要素を拡大・縮小するための2D変換関数です。要素の幅だけを変更したい場合に便利で、縦方向には一切影響を与えません。

scaleX() の基本構文

scaleX(x)

引数 x には、要素の各点の横座標（abscissa）に適用する倍率を表す数値を指定します。この値の意味は以下のとおりです。

• 1：元のサイズのまま（変化なし）
• 1より大きい値：横方向に拡大される
• 0〜1の間の値：横方向に縮小される
• 負の値：横方向に反転しながら拡大・縮小される

scaleX() の使用例

次の例では、黄色い正方形のdiv要素に対して scaleX(0.5) を適用し、横幅を半分に縮小しています。

div {
    width: 60px;
    height: 60px;
    background-color: yellow;
}
.scaled {
    transform: scaleX(0.5);
    background-color: black;
}

このコードでは、.scaled クラスが適用された要素は、高さ60pxはそのままに、横幅が実質30px分の見た目に圧縮されて表示されます。背景色を黒に変更することで、元の要素との違いがひと目でわかるようになっています。

補足：transform-origin との組み合わせ

デフォルトでは、拡大・縮小は要素の中心を基準に行われます。基準点を変更したい場合は、transform-origin プロパティを併用します。例えば、左端を基準に伸縮させたい場合は以下のように指定します。

.scaled {
    transform: scaleX(0.5);
    transform-origin: left center;
}

また、縦方向にも同時に拡大・縮小したい場合は、scale(x, y) や scaleY(y) を使うことで柔軟なスケール変換が可能です。