[tailwindcss 및 번역] TRANSFORMS/Translate

이 보도에 관하여

이 문장은 TRANSFORMS/Translate의 문장을 일본어로 번역한 것이다.
글에서 사용한 이미지는 공식 문서의 이미지를 참조합니다.

Translate

transform에서 요소를 변환하는 데 사용되는 실용 프로그램입니다.
범주 및 속성 대응 테이블
카테고리
등록 정보translate-x-0 --tw-translate-x: 0px; translate-x-px --tw-translate-x: 1px; translate-x-0.5 --tw-translate-x: 0.125rem; translate-x-1 --tw-translate-x: 0.25rem; translate-x-1.5 --tw-translate-x: 0.375rem; translate-x-2 --tw-translate-x: 0.5rem; translate-x-2.5 --tw-translate-x: 0.625rem; translate-x-3 --tw-translate-x: 0.75rem; translate-x-3.5 --tw-translate-x: 0.875rem; translate-x-4 --tw-translate-x: 1rem; translate-x-5 --tw-translate-x: 1.25rem; translate-x-6 --tw-translate-x: 1.5rem; translate-x-7 --tw-translate-x: 1.75rem; translate-x-8 --tw-translate-x: 2rem; translate-x-9 --tw-translate-x: 2.25rem; translate-x-10 --tw-translate-x: 2.5rem; translate-x-11 --tw-translate-x: 2.75rem; translate-x-12 --tw-translate-x: 3rem; translate-x-14 --tw-translate-x: 3.5rem; translate-x-16 --tw-translate-x: 4rem; translate-x-20 --tw-translate-x: 5rem; translate-x-24 --tw-translate-x: 6rem; translate-x-28 --tw-translate-x: 7rem; translate-x-32 --tw-translate-x: 8rem; translate-x-36 --tw-translate-x: 9rem; translate-x-40 --tw-translate-x: 10rem; translate-x-44 --tw-translate-x: 11rem; translate-x-48 --tw-translate-x: 12rem; translate-x-52 --tw-translate-x: 13rem; translate-x-56 --tw-translate-x: 14rem; translate-x-60 --tw-translate-x: 15rem; translate-x-64 --tw-translate-x: 16rem; translate-x-72 --tw-translate-x: 18rem; translate-x-80 --tw-translate-x: 20rem; translate-x-96 --tw-translate-x: 24rem; translate-x-1/2 --tw-translate-x: 50%; translate-x-1/3 --tw-translate-x: 33.333333%; translate-x-2/3 --tw-translate-x: 66.666667%; translate-x-1/4 --tw-translate-x: 25%; translate-x-2/4 --tw-translate-x: 50%; translate-x-3/4 --tw-translate-x: 75%; translate-x-full --tw-translate-x: 100%; -translate-x-0 --tw-translate-x: 0px; -translate-x-px --tw-translate-x: -1px; -translate-x-0.5 --tw-translate-x: -0.125rem; -translate-x-1 --tw-translate-x: -0.25rem; -translate-x-1.5 --tw-translate-x: -0.375rem; -translate-x-2 --tw-translate-x: -0.5rem; -translate-x-2.5 --tw-translate-x: -0.625rem; -translate-x-3 --tw-translate-x: -0.75rem; -translate-x-3.5 --tw-translate-x: -0.875rem; -translate-x-4 --tw-translate-x: -1rem; -translate-x-5 --tw-translate-x: -1.25rem; -translate-x-6 --tw-translate-x: -1.5rem; -translate-x-7 --tw-translate-x: -1.75rem; -translate-x-8 --tw-translate-x: -2rem; -translate-x-9 --tw-translate-x: -2.25rem; -translate-x-10 --tw-translate-x: -2.5rem; -translate-x-11 --tw-translate-x: -2.75rem; -translate-x-12 --tw-translate-x: -3rem; -translate-x-14 --tw-translate-x: -3.5rem; -translate-x-16 --tw-translate-x: -4rem; -translate-x-20 --tw-translate-x: -5rem; -translate-x-24 --tw-translate-x: -6rem; -translate-x-28 --tw-translate-x: -7rem; -translate-x-32 --tw-translate-x: -8rem; -translate-x-36 --tw-translate-x: -9rem; -translate-x-40 --tw-translate-x: -10rem; -translate-x-44 --tw-translate-x: -11rem; -translate-x-48 --tw-translate-x: -12rem; -translate-x-52 --tw-translate-x: -13rem; -translate-x-56 --tw-translate-x: -14rem; -translate-x-60 --tw-translate-x: -15rem; -translate-x-64 --tw-translate-x: -16rem; -translate-x-72 --tw-translate-x: -18rem; -translate-x-80 --tw-translate-x: -20rem; -translate-x-96 --tw-translate-x: -24rem; -translate-x-1/2 --tw-translate-x: -50%; -translate-x-1/3 --tw-translate-x: -33.333333% ;-translate-x-2/3 --tw-translate-x: -66.666667% ;-translate-x-1/4 --tw-translate-x: -25%; -translate-x-2/4 --tw-translate-x: -50%; -translate-x-3/4 --tw-translate-x: -75%; -translate-x-full --tw-translate-x: -100%; translate-y-0 --tw-translate-y: 0px; translate-y-px --tw-translate-y: 1px; translate-y-0.5 --tw-translate-y: 0.125rem; translate-y-1 --tw-translate-y: 0.25rem; translate-y-1.5 --tw-translate-y: 0.375rem; translate-y-2 --tw-translate-y: 0.5rem; translate-y-2.5 --tw-translate-y: 0.625rem; translate-y-3 --tw-translate-y: 0.75rem; translate-y-3.5 --tw-translate-y: 0.875rem; translate-y-4 --tw-translate-y: 1rem; translate-y-5 --tw-translate-y: 1.25rem; translate-y-6 --tw-translate-y: 1.5rem; translate-y-7 --tw-translate-y: 1.75rem; translate-y-8 --tw-translate-y: 2rem; translate-y-9 --tw-translate-y: 2.25rem; translate-y-10 --tw-translate-y: 2.5rem; translate-y-11 --tw-translate-y: 2.75rem; translate-y-12 --tw-translate-y: 3rem; translate-y-14 --tw-translate-y: 3.5rem; translate-y-16 --tw-translate-y: 4rem; translate-y-20 --tw-translate-y: 5rem; translate-y-24 --tw-translate-y: 6rem; translate-y-28 --tw-translate-y: 7rem; translate-y-32 --tw-translate-y: 8rem; translate-y-36 --tw-translate-y: 9rem; translate-y-40 --tw-translate-y: 10rem; translate-y-44 --tw-translate-y: 11rem; translate-y-48 --tw-translate-y: 12rem; translate-y-52 --tw-translate-y: 13rem; translate-y-56 --tw-translate-y: 14rem; translate-y-60 --tw-translate-y: 15rem; translate-y-64 --tw-translate-y: 16rem; translate-y-72 --tw-translate-y: 18rem; translate-y-80 --tw-translate-y: 20rem; translate-y-96 --tw-translate-y: 24rem; translate-y-1/2 --tw-translate-y: 50%; translate-y-1/3 --tw-translate-y: 33.333333%; translate-y-2/3 --tw-translate-y: 66.666667%; translate-y-1/4 --tw-translate-y: 25%; translate-y-2/4 --tw-translate-y: 50%; translate-y-3/4 --tw-translate-y: 75%; translate-y-full --tw-translate-y: 100%; -translate-y-0 --tw-translate-y: 0px; -translate-y-px --tw-translate-y: -1px; -translate-y-0.5 --tw-translate-y: -0.125rem; -translate-y-1 --tw-translate-y: -0.25rem; -translate-y-1.5 --tw-translate-y: -0.375rem; -translate-y-2 --tw-translate-y: -0.5rem; -translate-y-2.5 --tw-translate-y: -0.625rem; -translate-y-3 --tw-translate-y: -0.75rem; -translate-y-3.5 --tw-translate-y: -0.875rem; -translate-y-4 --tw-translate-y: -1rem; -translate-y-5 --tw-translate-y: -1.25rem; -translate-y-6 --tw-translate-y: -1.5rem; -translate-y-7 --tw-translate-y: -1.75rem; -translate-y-8 --tw-translate-y: -2rem; -translate-y-9 --tw-translate-y: -2.25rem; -translate-y-10 --tw-translate-y: -2.5rem; -translate-y-11 --tw-translate-y: -2.75rem; -translate-y-12 --tw-translate-y: -3rem; -translate-y-14 --tw-translate-y: -3.5rem; -translate-y-16 --tw-translate-y: -4rem; -translate-y-20 --tw-translate-y: -5rem; -translate-y-24 --tw-translate-y: -6rem; -translate-y-28 --tw-translate-y: -7rem; -translate-y-32 --tw-translate-y: -8rem; -translate-y-36 --tw-translate-y: -9rem; -translate-y-40 --tw-translate-y: -10rem; -translate-y-44 --tw-translate-y: -11rem; -translate-y-48 --tw-translate-y: -12rem; -translate-y-52 --tw-translate-y: -13rem; -translate-y-56 --tw-translate-y: -14rem; -translate-y-60 --tw-translate-y: -15rem; -translate-y-64 --tw-translate-y: -16rem; -translate-y-72 --tw-translate-y: -18rem; -translate-y-80 --tw-translate-y: -20rem; -translate-y-96 --tw-translate-y: -24rem; -translate-y-1/2 --tw-translate-y: -50%; -translate-y-1/3 --tw-translate-y: -33.333333%; -translate-y-2/3 --tw-translate-y: -66.666667%; -translate-y-1/4 --tw-translate-y: -25%; -translate-y-2/4 --tw-translate-y: -50%; -translate-y-3/4 --tw-translate-y: -75%; -translate-y-full --tw-translate-y: -100%;

사용법

우선transform 유틸리티에서transform을 사용한 다음translate-x-{amount}과translate-y-{amount} 유틸리티에서translate의 방향과 거리를 지정하여 요소를 변속시킨다.

<img class="transform translate-y-6 ..." />
<img class="transform -translate-y-6 ..." />
<img class="transform translate-y-0 ..." />

스펀지 패드

특정 단점에서 요소의 전송률을 제어하려면 기존translate 유틸리티에 접두사 {screen}: 를 추가하십시오.예를 들어 md:translate-x-8를 사용할 때 중간 화면 크기 이상에만 적용translate-x-8 유틸리티가 적용된다.

<img class="transform translate-x-2 md:translate-x-8 ..." />

Tailwind의 응답 디자인 기능에 대한 상세한 내용은 스펀지 패드 디자인의 문서를 보십시오.

사용자 정의

변속률

기본적으로 Tailwind는 고정 값의 전송 도구를 제공합니다. 이것은 저희 spacing scale 와 일치합니다.또한 상대 요소 크기의 50% 및 100% 변수도 제공합니다.
전역 구성 비율은 tailwind.config.js 파일의 theme.spacing 또는 theme.extend.spacing 영역에서 사용자 정의할 수 있습니다.
tailwind.config.js

  module.exports = {
    theme: {
      extend: {
        spacing: {
+        '72': '18rem',
+        '84': '21rem',
+        '96': '24rem',
        }
      }
    }
  }

translate 축소율을 단독으로 정의하려면 tailwind.config.js 파일의 theme.translate 영역을 사용하십시오.
tailwind.config.js

  module.exports = {
    theme: {
      extend: {
        translate: {
+        '1/7': '14.2857143%',
+        '2/7': '28.5714286%',
+        '3/7': '42.8571429%',
+        '4/7': '57.1428571%',
+        '5/7': '71.4285714%',
+        '6/7': '85.7142857%',
        }
      }
    }
  }

기본 테마의 사용자 정의 방법에 대한 자세한 설명은 사용자 정의 주제 문서에 있습니다.

변체

기본적으로, 변속 도구에만 응답 변체, 동축 변체, 초점 변체를 생성합니다.tailwind.config.js 파일variants 구역translate의 속성을 수정하여 변속 도구로 생성된 변체를 제어할 수 있습니다.
예를 들어, 이 설정은 활성 및 그룹 동위원소의 변형도 생성합니다.
tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+      translate: ['active', 'group-hover'],
      }
    }
  }

사용 안 함

프로젝트에서translate 유틸리티를 사용할 계획이 없으면, 설정 파일 corePlugins 영역에서 속성 translate 을 false 으로 설정하여 완전히 무효화할 수 있습니다.
tailwind.config.js

  module.exports = {
    corePlugins: {
      // ...
+    translate: false,
    }
  }