scaleX()
CSS 함수인 scaleX()
x 축을 따라 (수평방향)으로 요소의 크기를 조절하는 변형을 정의합니다. 결과는 <transform-function>
데이터 타입 입니다.
스케일 팩터가 1 인 경우를 제외하고 상수 요소로 각 엘리먼트 위치의 가로 좌표를 수정합니다, 이 경우 함수는 항등 변환입니다.스케일링은 등방성이 아니며, 엘리먼트의 각도는 보존되지 않습니다.scaleX(-1)
은 원점을 지나는 수직축이 있는 대칭축을 의미합니다 ( transform-origin
(en-US) 속성의해 지정되어집니다).
참고: 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 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
명세서
Specification |
---|
CSS Transforms Module Level 1 # funcdef-transform-scalex |