CSS3 scaleX() 함수로 X축 기준 요소 크기 변환하기

CSS3에서 X축을 이용한 스케일 변환

scaleX(x) 함수는 CSS3의 transform 속성과 함께 사용되며, 요소를 X축(가로 방향)을 기준으로 확대하거나 축소하는 스케일 변환을 수행합니다.

scaleX()는 요소의 높이는 그대로 유지한 채 가로 길이만 변경하기 때문에, 버튼이나 이미지에 가로 방향 강조 효과를 주고 싶을 때 유용하게 활용됩니다.

문법(Syntax)

scaleX(x)

여기서 x는 요소의 각 지점 가로좌표(abscissa)에 적용할 배율을 나타내는 숫자입니다.

• x = 1: 원본 크기 그대로 유지
• x > 1: 가로 방향으로 확대 (예: 2는 두 배)
• 0 < x < 1: 가로 방향으로 축소 (예: 0.5는 절반)
• x가 음수: 가로 방향 반전(거울상) 효과

예제 코드

다음 예제에서는 노란색 정사각형 div 요소를 scaleX(0.5)를 사용해 가로 길이를 절반으로 줄인 모습을 확인할 수 있습니다.

div {
   width: 60px;
   height: 60px;
   background-color: yellow;
}
.scaled {
   transform: scaleX(0.5);
   background-color: black;
}

위 코드에서 .scaled 클래스가 적용된 요소는 원래 너비 60px에서 가로 방향으로 50% 축소되어 30px 너비로 표시되며, 높이는 60px 그대로 유지됩니다. 색상을 검정으로 변경한 것은 변환 전후의 요소를 시각적으로 쉽게 구분하기 위함입니다.