--- title: scaleX() slug: Web/CSS/transform-function/scaleX() translation_of: Web/CSS/transform-function/scaleX() ---

CSS 함수인 scaleX() x 축을 따라 (수평방향)으로 요소의 크기를 조절하는 변형을 정의합니다. 결과는 {{cssxref("<transform-function>")}} 데이터 타입 입니다.

스케일 팩터가 1 인 경우를 제외하고 상수 요소로 각 엘리먼트 위치의 가로 좌표를 수정합니다, 이 경우 함수는 항등 변환입니다.스케일링은 등방성이 아니며, 엘리먼트의 각도는 보존되지 않습니다.scaleX(-1) 은 원점을 지나는 수직축이 있는 대칭축을 의미합니다 ( {{cssxref("transform-origin")}} 속성의해 지정되어집니다).

Note: scaleX(sx) 는 scale(sx, 1) 또는 scale3d(sx, 1, 1) 와 같습니다.

Syntax

scaleX(s)

Values

s: 요소의 각 위치의 횡좌표에 적용 할 스케일링 펙터를 나타내는 {{cssxref("<number>")}} 입니다.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
$(\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]`

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
{{SpecName("CSS3 Transforms", "#funcdef-transform-scalex", "scaleX()")}}	{{Spec2("CSS3 Transforms")}}	Initial definition