트랜스폼
translate
엘리먼트를 이동시키는 유틸리티입니다.
| Class | Styles |
|---|---|
translate-<number> | translate: calc(var(--spacing) * <number>) calc(var(--spacing) * <number>); |
-translate-<number> | translate: calc(var(--spacing) * -<number>) calc(var(--spacing) * -<number>); |
translate-<fraction> | translate: calc(<fraction> * 100%) calc(<fraction> * 100%); |
-translate-<fraction> | translate: calc(<fraction> * -100%) calc(<fraction> * -100%); |
translate-full | translate: 100% 100%; |
-translate-full | translate: -100% -100%; |
translate-px | translate: 1px 1px; |
-translate-px | translate: -1px -1px; |
translate-(<custom-property>) | translate: var(<custom-property>) var(<custom-property>); |
translate-[<value>] | translate: <value> <value>; |
translate-x-<number> | translate: calc(var(--spacing) * <number>) var(--tw-translate-y); |
-translate-x-<number> | translate: calc(var(--spacing) * -<number>) var(--tw-translate-y); |
translate-x-<fraction> | translate: calc(<fraction> * 100%) var(--tw-translate-y); |
-translate-x-<fraction> | translate: calc(<fraction> * -100%) var(--tw-translate-y); |
translate-x-full | translate: 100% var(--tw-translate-y); |
-translate-x-full | translate: -100% var(--tw-translate-y); |
translate-x-px | translate: 1px var(--tw-translate-y); |
-translate-x-px | translate: -1px var(--tw-translate-y); |
translate-x-(<custom-property>) | translate: var(<custom-property>) var(--tw-translate-y); |
translate-x-[<value>] | translate: <value> var(--tw-translate-y); |
translate-y-<number> | translate: var(--tw-translate-x) calc(var(--spacing) * <number>); |
-translate-y-<number> | translate: var(--tw-translate-x) calc(var(--spacing) * -<number>); |
translate-y-<fraction> | translate: var(--tw-translate-x) calc(<fraction> * 100%); |
-translate-y-<fraction> | translate: var(--tw-translate-x) calc(<fraction> * -100%); |
translate-y-full | translate: var(--tw-translate-x) 100%; |
-translate-y-full | translate: var(--tw-translate-x) -100%; |
translate-y-px | translate: var(--tw-translate-x) 1px; |
-translate-y-px | translate: var(--tw-translate-x) -1px; |
translate-y-(<custom-property>) | translate: var(--tw-translate-x) var(<custom-property>); |
translate-y-[<value>] | translate: var(--tw-translate-x) <value>; |
translate-z-<number> | translate: var(--tw-translate-x) var(--tw-translate-y) calc(var(--spacing) * <number>); |
-translate-z-<number> | translate: var(--tw-translate-x) var(--tw-translate-y) calc(var(--spacing) * -<number>); |
translate-z-px | translate: var(--tw-translate-x) var(--tw-translate-y) 1px; |
-translate-z-px | translate: var(--tw-translate-x) var(--tw-translate-y) -1px; |
translate-z-(<custom-property>) | translate: var(--tw-translate-x) var(--tw-translate-y) var(<custom-property>); |
translate-z-[<value>] | translate: var(--tw-translate-x) var(--tw-translate-y) <value>; |
translate-none | translate: none; |
예제
간격 스케일 사용하기
translate-<number> 유틸리티를 사용해 요소를 양축으로 이동시킬 수 있습니다. 예를 들어 translate-2와 -translate-4 같은 유틸리티를 사용하면 간격 스케일에 따라 요소를 이동시킬 수 있습니다.
-translate-6
translate-2
translate-8
<img class="-translate-6 ..." src="/img/mountains.jpg" /><img class="translate-2 ..." src="/img/mountains.jpg" /><img class="translate-8 ..." src="/img/mountains.jpg" />백분율 사용하기
translate-<fraction> 유틸리티를 사용해 엘리먼트의 크기에 비례하여 양축으로 이동시킬 수 있습니다. 예를 들어 translate-1/4나 -translate-full 같은 유틸리티를 사용할 수 있습니다.
-translate-1/4
translate-1/6
translate-1/2
<img class="-translate-1/4 ..." src="/img/mountains.jpg" /><img class="translate-1/6 ..." src="/img/mountains.jpg" /><img class="translate-1/2 ..." src="/img/mountains.jpg" />x축으로 이동하기
translate-x-<number>와 translate-x-<fraction> 유틸리티를 사용해 엘리먼트를 x축으로 이동할 수 있습니다. 예를 들어 translate-x-4와 translate-x-1/4를 사용할 수 있습니다.
-translate-x-4
translate-x-2
translate-x-1/2
<img class="-translate-x-4 ..." src="/img/mountains.jpg" /><img class="translate-x-2 ..." src="/img/mountains.jpg" /><img class="translate-x-1/2 ..." src="/img/mountains.jpg" />y축 방향으로 이동하기
translate-y-<number>와 translate-y-<fraction> 유틸리티를 사용해 엘리먼트를 y축 방향으로 이동할 수 있습니다. 예를 들어 translate-y-6이나 translate-y-1/3와 같은 클래스를 사용할 수 있습니다.
-translate-y-4
translate-y-2
translate-y-1/2
<img class="-translate-y-4 ..." src="/img/mountains.jpg" /><img class="translate-y-2 ..." src="/img/mountains.jpg" /><img class="translate-y-1/2 ..." src="/img/mountains.jpg" />z축 이동
translate-z-<number> 유틸리티를 사용해 엘리먼트를 z축으로 이동할 수 있습니다. 예를 들어 translate-z-6나 -translate-z-12와 같은 유틸리티를 사용할 수 있습니다.
-translate-z-8
translate-z-4
translate-z-12
<div class="transform-3d"> <img class="-translate-z-8 rotate-x-50 rotate-z-45 ..." src="/img/mountains.jpg" /> <img class="translate-z-2 rotate-x-50 rotate-z-45 ..." src="/img/mountains.jpg" /> <img class="translate-z-1/2 rotate-x-50 rotate-z-45 ..." src="/img/mountains.jpg" /></div>translate-z-<number> 유틸리티를 사용할 때는 부모 엘리먼트에 transform-3d 유틸리티를 적용해야 합니다.
커스텀 값 사용하기
translate-[<value>] 구문을 사용하세요 translation를 완전히 커스텀한 값으로 설정하려면:
<img class="translate-[3.142rad] ..." src="/img/mountains.jpg" />CSS 변수를 사용하려면 translate-(<custom-property>) 구문을 사용할 수도 있습니다:
<img class="translate-(--my-translate) ..." src="/img/mountains.jpg" />이는 translate-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 a translate 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<img class="translate-45 md:translate-60 ..." src="/img/mountains.jpg" />변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
