scaleX()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

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

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

Syntax

scaleX(s)

Values

s

요소의 각 위치의 횡좌표에 적용 할 스케일링 펙터를 나타내는 <number> 입니다.

Cartesian coordinates on ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3
s 0 0 1 s 0 0 0 1 0 0 0 1 s 0 0 0 1 0 0 0 1 s 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1
[s 0 0 1 0 0]

Examples

HTML

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

CSS

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

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

Result

명세서

Specification
CSS Transforms Module Level 1
# funcdef-transform-scalex

See also