CSS / 애니메이션 / transform / scale – 2D 확대 또는 축소하기

transform / scale

  • transform의 scale로 요소를 확대 또는 축소할 수 있습니다.
  • 평면에서의 확대 또는 축소입니다.
  • IE는 버전 10부터 지원합니다.

문법

transform: scale( 2.0 );

가로와 세로 모두 2배 확대합니다.

transform: scale( 2.0, 1.5 );

가로로 2배, 세로로 1.5배 확대합니다.

transform: scaleX( 2.0 );

가로로 2배 확대합니다.

transform: scaleX( 2.0 ) scaleY( 1.5 );

가로로 2배, 세로로 1.5배 확대합니다.

예제

  • 마우스를 올렸을 때 확대됩니다. 그 과정을 보기 위해 transition 속성을 추가했습니다.
<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			.jb {
				width: 100px;
				height: 100px;
				margin: 60px auto;
				background-color: orange;
				transition: all ease 1s;
			}
			.jb:hover {
				transform: scale( 1.5 );
			}
		</style>
	</head>
	<body>
		<div class="jb"></div>
	</body>
</html>

  • 가로와 세로 다른 비율로 확대합니다.
.jb:hover {
	transform: scaleX( 2.5 ) scaleY( 1.5 );
}

CSS 강좌