--- title: scaleX() slug: Web/CSS/transform-function/scaleX() tags: - CSS - CSS 関数 - CSS 座標変換 - 関数 - リファレンス browser-compat: css.types.transform-function.scaleX translation_of: Web/CSS/transform-function/scaleX() --- {{CSSRef}} **`scaleX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を X 軸に沿って (水平に) 変倍する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 ![](scalex.png) これは要素のそれぞれの点の横座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleX(-1)` は[軸の線対称](https://en.wikipedia.org/wiki/Axial_symmetry)を定義し、垂直軸は ({{cssxref("transform-origin")}} プロパティの指定通りに) 原点を通過します。 > **Note:** `scaleX(sx)` は `scale(sx, 1)` または `scale3d(sx, 1, 1)` と等価です。 ## 構文 ```css scaleX(s) ``` ### 値 - `s` - : {{cssxref("<number>")}} で、要素のそれぞれの点の横座標に適用される変倍率を表します。

ℝ^2 上のデカルト座標	ℝℙ^2 上の同次座標	ℝ^3 上のデカルト座標	ℝℙ^3 上の同次座標
$(\begin{matrix} s & 0 \\ 0 & 1 \end{matrix})$	$(\begin{matrix} s & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} s & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} s & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
$(\begin{matrix} s & 0 \\ 0 & 1 \end{matrix})$	`[s 0 0 1 0 0]`

例

### HTML ```html

Normal

Scaled

``` ### CSS ```css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scaleX(0.6); background-color: pink; } ``` ### 結果 {{EmbedLiveSample("Examples","200","200")}} ## 仕様書 {{Specifications}} ## ブラウザーの互換性 {{Compat}} ## 関連情報 - [`scaleY()`]() - [`scaleZ()`]() - {{cssxref("transform")}} - {{cssxref("<transform-function>")}} - {{cssxref("transform-origin")}}