scaleX 함수
scaleX 함수는 X축을 따라 요소를
스케일링합니다. 스케일링은
transform-origin 속성으로
정의된 점을 기준으로 수행됩니다.
함수의 값은 정수 또는 소수입니다.
값이 1보다 크면 요소가 확대되고,
작으면(예: 0.5) 요소가
축소됩니다. 1을 설정하면 아무것도 변경되지 않습니다
(이것이 기본값입니다).
구문
선택자 {
transform: scaleX(숫자);
}
예시
블록에 마우스를 올리면 X축을 따라 1.5배
확대됩니다:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scaleX(1.5);
}
:
예시
블록에 마우스를 올리면 X축을 따라 2배
축소됩니다:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scaleX(0.5);
}
:
