scale

Baseline 2022

Newly available

Since August 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

CSS scale 속성은 transform 속성과는 독립적으로 개별적인 크기 변형을 지정할 수 있게 합니다. 이는 일반적인 사용자 인터페이스 사용에 더 알맞고, transform 값을 사용할 때처럼 정확한 순서를 기억해야 할 필요가 없습니다.

시도해보기

구문

css
/* 키워드 값 */
scale: none;

/* 단일 값 */
/* 값이 1 혹은 100% 보다 크면 요소가 확대됩니다. */
scale: 2;
/* 값이 1 혹은 100% 보다 작으면 요소가 수축됩니다. */
scale: 50%;

/* 두 개의 값 */
scale: 2 0.5;

/* 세 개의 값 */
scale: 200% 50% 200%;

/* 전역 값 */
scale: inherit;
scale: initial;
scale: revert;
scale: revert-layer;
scale: unset;

값

단일 값

X축과 Y축 모두에서 동일한 비율의 영향을 받는 요소의 크기 비율을 지정하기 위해 <number> 혹은 <percentage> 값을 사용합니다. scale() (2D 크기 조정)이 단일 값으로 설정되었을 때와 동일한 동작입니다.

두 개의 값

2D 크기 조정의 X축과 Y축 값을 각각 지정하는 두 개의 <number> 혹은 <percentage> 값입니다. scale() (2D 크기 조정)이 두 개의 값으로 설정되었을 때와 동일한 동작입니다.

세 개의 값

3D 크기 조정의 X축, Y축, Z축 값을 각각 지정하는 세 개의 <number> 혹은 <percentage> 값입니다. scale3d() (3D 크기 조정) 함수와 동일한 동작입니다.

none

어떠한 크기 조정도 지정하지 않습니다.

형식 정의

초기값none
적용대상transformable elements
상속no
계산 값as specified
Animation typea transform
Creates stacking contextyes

형식 구문

scale = 
  none                              |
  [ <number> | <percentage> ]{1,3}

예제

호버 시 요소의 크기 조정하기

아래 예제는 호버 시 요소의 크기를 어떻게 지정하는지를 나타냅니다. 두 개의 박스가 있으며 하나는 단일 scale 값을 사용하여 양축으로 크기가 지정됩니다. 두 번째 박스는 두 개의 scale 값을 사용하여 X축과 Y축을 독립적으로 조정합니다.

HTML

html
<div class="box" id="box1">단일 값</div>
<div class="box" id="box2">두 개의 값</div>

CSS

css
.box {
  float: left;
  margin: 1em;
  width: 7em;
  line-height: 7em;
  text-align: center;
  transition: 0.5s ease-in-out;
  border: 3px dotted;
}

#box1:hover {
  scale: 1.25;
}

#box2:hover {
  scale: 1.25 0.75;
}

결과

명세서

Specification
CSS Transforms Module Level 2
# individual-transforms

브라우저 호환성

BCD tables only load in the browser

같이 보기

Note: skew는 독립적인 변형 값이 아닙니다.