scaleX()

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

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

Note: 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
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
The definition of 'scaleX()' in that specification.
Working Draft Initial definition

See also