scaleX()

CSSのscaleX() 関数は、要素をX軸に沿って（水平に）拡縮する変形を定義します。
結果は <transform-function> データ型になります。

係数が 1 である場合を除いて、各要素点の横座標を一定の係数で修正し、この場合、関数は恒等変換です。拡大縮小は等方性ではなく、要素の角度は保存されません。 scaleX(-1) は軸の線対称を定義し、垂直軸は原点を通過します (transform-origin プロパティで指定)。

メモ: scaleX(sx)は scale(sx, 1)またはscale3d(sx, 1, 1)と等価です。

Syntax

scaleX(s)

Values

s
Is a <number> representing the scaling factor to apply on the abscissa of each point of the element.
Cartesian coordinates on ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3
s0 01 s00010001 s00010001 s000010000100001
[s 0 0 1 0 0]

Examples

HTML

<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scaleX(0.6);
  background-color: pink;
}

Result

Specifications

Specification Status Comment
CSS Transforms Level 1
scaleX() の定義		 草案 Initial definition

Browser compatibility

BCD tables only load in the browser

See also