트랜스폼
scale
엘리먼트 크기를 조절하는 유틸리티입니다.
| Class | Styles |
|---|---|
scale-none | scale: none; |
scale-<number> | scale: <number>% <number>%; |
-scale-<number> | scale: calc(<number>% * -1) calc(<number>% * -1); |
scale-(<custom-property>) | scale: var(<custom-property>) var(<custom-property>); |
scale-[<value>] | scale: <value>; |
scale-x-<number> | scale: <number>% var(--tw-scale-y); |
-scale-x-<number> | scale: calc(<number>% * -1) var(--tw-scale-y); |
scale-x-(<custom-property>) | scale: var(<custom-property>) var(--tw-scale-y); |
scale-x-[<value>] | scale: <value> var(--tw-scale-y); |
scale-y-<number> | scale: var(--tw-scale-x) <number>%; |
-scale-y-<number> | scale: var(--tw-scale-x) calc(<number>% * -1); |
scale-y-(<custom-property>) | scale: var(--tw-scale-x) var(<custom-property>); |
scale-y-[<value>] | scale: var(--tw-scale-x) <value>; |
scale-z-<number> | scale: var(--tw-scale-x) var(--tw-scale-y) <number>%; |
-scale-z-<number> | scale: var(--tw-scale-x) var(--tw-scale-y) calc(<number>% * -1); |
scale-z-(<custom-property>) | scale: var(--tw-scale-x) var(--tw-scale-y) var(<custom-property>); |
scale-z-[<value>] | scale: var(--tw-scale-x) var(--tw-scale-y) <value>; |
scale-3d | scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z); |
예제
기본 예제
scale-75나 scale-150 같은 scale-<number> 유틸리티를 사용해 엘리먼트를 원래 크기의 백분율로 조정할 수 있습니다.
scale-75
scale-100
scale-125
<img class="scale-75 ..." src="/img/mountains.jpg" /><img class="scale-100 ..." src="/img/mountains.jpg" /><img class="scale-125 ..." src="/img/mountains.jpg" />x축 스케일링
scale-x-75나 -scale-x-150 같은 scale-x-<number> 유틸리티를 사용해 엘리먼트의 x축을 원래 너비의 백분율로 스케일링할 수 있습니다.
scale-x-75
scale-x-100
scale-x-125
<img class="scale-x-75 ..." src="/img/mountains.jpg" /><img class="scale-x-100 ..." src="/img/mountains.jpg" /><img class="scale-x-125 ..." src="/img/mountains.jpg" />y축 스케일링
scale-y-75나 -scale-y-150 같은 scale-y-<number> 유틸리티를 사용해 엘리먼트의 y축을 원래 높이의 백분율로 스케일링할 수 있습니다.
scale-y-75
scale-y-100
scale-y-125
<img class="scale-y-75 ..." src="/img/mountains.jpg" /><img class="scale-y-100 ..." src="/img/mountains.jpg" /><img class="scale-y-125 ..." src="/img/mountains.jpg" />음수 값 사용하기
-scale-<number>, -scale-x-<number>, -scale-y-<number> 유틸리티를 사용해 요소를 원래 크기의 비율로 반전하거나 축소할 수 있습니다. 예를 들어 -scale-x-75와 -scale-125를 사용할 수 있습니다.
-scale-x-75
-scale-100
-scale-y-125
<img class="-scale-x-75 ..." src="/img/mountains.jpg" /><img class="-scale-100 ..." src="/img/mountains.jpg" /><img class="-scale-y-125 ..." src="/img/mountains.jpg" />커스텀 값 사용하기
scale-[<value>] 구문을 사용하세요 scale를 완전히 커스텀한 값으로 설정하려면:
<img class="scale-[1.7] ..." src="/img/mountains.jpg" />CSS 변수를 사용하려면 scale-(<custom-property>) 구문을 사용할 수도 있습니다:
<img class="scale-(--my-scale) ..." src="/img/mountains.jpg" />이는 scale-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
호버 시 적용하기
scale가 모음으로 시작하면 "an", 그렇지 않으면 "a"를 붙여 scale 유틸리티 앞에 hover:*와 같은 변형을 추가하면 해당 상태에서만 유틸리티를 적용할 수 있습니다:
<img class="scale-95 hover:scale-120 ..." src="/img/mountains.jpg" />변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
