scale 함수

함수 scale는 요소의 크기를 조정합니다: 요소를 여러 배로 확대하거나 축소합니다. 크기 조정은 속성 transform-origin로 지정된 점을 기준으로 수행됩니다.

하나 또는 두 개의 매개변수를 쉼표로 구분하여 받을 수 있습니다. 매개변수가 두 개인 경우 첫 번째 매개변수는 가로 방향 크기 조정을, 두 번째는 세로 방향 크기 조정을 지정합니다. 매개변수가 하나인 경우 가로 및 세로 방향 동시 크기 조정을 지정합니다.

매개변수 값은 정수 또는 소수입니다. 값이 1보다 크면 요소가 확대되고, 작으면(예: 0.5) 요소가 축소됩니다. 1을 지정하면 아무것도 변경되지 않습니다 (이것이 기본값입니다).

문법

선택자 {
	transform: scale(하나 또는 두 개의 숫자);
}

블록에 마우스를 올리면 두 축 모두에서 크기를 1.5배로 확대합니다:

<div id="elem">lorem ipsum</div>

#elem {
	border: 1px solid black;
	width: 100px;
	height: 50px;
}
#elem:hover {
	transform: scale(1.5);
}

두 축 모두에서 크기를 2배로 축소합니다:

<div id="elem">lorem ipsum</div>

#elem {
	border: 1px solid black;
	width: 100px;
	height: 50px;
}
#elem:hover {
	transform: scale(0.5);
}

X축 방향으로 크기를 2배로 확대합니다:

<div id="elem">lorem ipsum</div>

#elem {
	border: 1px solid black;
	width: 100px;
	height: 50px;
}
#elem:hover {
	transform: scale(2, 1);
}

Y축 방향으로 크기를 2배로 확대합니다:

<div id="elem">lorem ipsum</div>

#elem {
	border: 1px solid black;
	width: 100px;
	height: 50px;
}
#elem:hover {
	transform: scale(1, 2);
}