scaleX()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
CSS 함수인 scaleX() x 축을 따라 (수평방향)으로 요소의 크기를 조절하는 변형을 정의합니다. 결과는 <transform-function> 데이터 타입 입니다.
스케일 팩터가 1 인 경우를 제외하고 상수 요소로 각 엘리먼트 위치의 가로 좌표를 수정합니다, 이 경우 함수는 항등 변환입니다.스케일링은 등방성이 아니며, 엘리먼트의 각도는 보존되지 않습니다.scaleX(-1) 은 원점을 지나는 수직축이 있는 대칭축을 의미합니다 ( transform-origin 속성의해 지정되어집니다).
참고:
scaleX(sx)는scale(sx, 1)또는scale3d(sx, 1, 1)와 같습니다.
Syntax
scaleX(s)
Values
| Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
|---|---|---|---|
[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 |