이동
이동 (Translate)
요소를 가로(x), 세로(y), 그리고 3D 공간의 깊이(z) 축으로 이동(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;
예시 (Examples)
스페이싱 스케일 사용하기 (Using the spacing scale)
translate-2, -translate-4 같은 translate-<number> 유틸리티를 사용하면 스페이싱 스케일을 기준으로 양쪽 축에서 요소를 이동할 수 있어요.
<img class="-translate-6 ..." src="/img/mountains.jpg" /><img class="translate-2 ..." src="/img/mountains.jpg" /><img class="translate-8 ..." src="/img/mountains.jpg" />
퍼센트 사용하기 (Using a percentage)
translate-1/4, -translate-full 같은 translate-<fraction> 유틸리티를 사용하면 요소 크기의 퍼센트만큼 양쪽 축에서 이동할 수 있어요.
<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축으로 이동하기 (Translating on the x-axis)
translate-x-4, translate-x-1/4 같은 translate-x-<number> 또는 translate-x-<fraction> 유틸리티를 사용하면 요소를 x축으로 이동할 수 있어요.
<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축으로 이동하기 (Translating on the y-axis)
translate-y-6, translate-y-1/3 같은 translate-y-<number> 또는 translate-y-<fraction> 유틸리티를 사용하면 요소를 y축으로 이동할 수 있어요.
<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축으로 이동하기 (Translating on the z-axis)
translate-z-6, -translate-z-12 같은 translate-z-<number> 유틸리티를 사용하면 요소를 z축으로 이동할 수 있어요.
<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 유틸리티가 적용되어 있어야 한다는 점을 기억하세요.
커스텀 값 사용하기 (Using a custom value)
translate-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 이동을 설정할 수 있어요.
<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() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.
반응형 디자인 (Responsive design)
translate 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.
<img class="translate-45 md:translate-60 ..." src="/img/mountains.jpg" />
변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.