CSS scaleX() 함수

정의와 사용법

CSS의 scaleX() 함수는 요소를 수평으로 확대하기 위해 사용됩니다.

scaleX() 요소의 너비를 증가하거나 감소시키기 위해 사용됩니다.

scaleX() 함수는 transform 속성에 사용됩니다.

예제

예제 1

사용 scaleX() 여러 <div> 요소의 너비를 확대하려면：

#myDiv1 {
  transform: scaleX(0.7);
}
#myDiv2 {
  transform: scaleX(90%);
}
#myDiv3 {
  transform: scaleX(1.1);
}

직접 시험해 보세요

예제 2

사용 scaleX() 이미지 너비를 확대하려면：

#img1 {
  transform: scaleX(0.6);
}
#img2 {
  transform: scaleX(90%);
}
#img3 {
  transform: scaleX(-0.6);
}
#img4 {
  transform: scaleX(1.1);
}

직접 시험해 보세요

CSS 문법

scaleX(s)

기술 세부 사항

브라우저 지원

표格에 나타난 숫자는 이 함수를 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

관련 페이지

교육:CSS 2D 변환

참조:CSS 트랜스폼 속성

참조:CSS scale 속성

참조:CSS 스케일() 함수

참조:CSS 스케일3d() 함수

참조:CSS 스케일Y() 함수