Zenn
🔖

transform: scaleX()とscale()の違い

に公開
CSS
HTML
tech

はじめに

CSSの transform プロパティは、要素の回転・拡大縮小・移動・傾斜などを行う強力なツールです。本記事では、その中でも「X軸方向の拡大縮小」に特化した scaleX() の使い方や注意点を解説します。

scaleX() とは？

scaleX() は、要素を水平方向（X軸）に拡大・縮小するための関数です。

transform: scaleX(1.5);

この例では、要素の横幅が1.5倍になります。縦幅（Y軸）は変わりません。

基本構文

transform: scaleX(倍率);

・倍率：数値。1 で元のサイズ、2 で2倍、0.5 で半分のサイズ。
・マイナス値を指定すると、**反転（左右反転）**されます

使用例

1. 横幅を2倍に拡大

``html
<div class="box"></div>

```css
.box {
  width: 100px;
  height: 100px;
  background: skyblue;
  transform: scaleX(2);
}

2. ホバーで左右反転アニメーション

.box:hover {
  transform: scaleX(-1);
  transition: transform 0.3s ease;
}

scaleX() の注意点

・中央を基準に拡大縮小されるため、レイアウトが崩れることがあります。
・基準点を変えたい場合は transform-origin を併用します。

transform-origin: left;

これで左端を基準にスケーリングされます。

scale() との違い

関数
scaleX() →横方向のみスケーリング
scaleY() →縦方向のみスケーリング
scale() →両方向を一括でスケーリング（scale(x, y) とも書ける）

実用Tips

・アイコンや画像の反転に便利

・スライドアニメーションの一部として利用可

・マイクロインタラクション（HoverやClick）で視覚的変化をつけやすい

参考リンク

https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/scaleX

https://css-tricks.com/almanac/properties/t/transform/

Discussion