변환

변환 (Transform)

요소에 적용된 변환(transform)의 처리 방식을 제어하는 유틸리티예요. GPU 하드웨어 가속을 강제하거나, 모든 변환을 한 번에 제거하고, 커스텀 변환 값을 설정할 수 있어요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

transform-(<custom-property>) transform: var(<custom-property>);

transform-[<value>] transform: <value>;

transform-none transform: none;

transform-gpu transform: translateZ(0) var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);

transform-cpu transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);

예시 (Examples)

하드웨어 가속 (Hardware acceleration)

트랜지션(transition)이 CPU보다 GPU로 렌더링될 때 더 잘 동작한다면, transform-gpu 유틸리티를 추가해 하드웨어 가속을 강제할 수 있어요.

<div class="scale-150 transform-gpu">
  <!-- ... -->
</div>

조건적으로 되돌려야 한다면 transform-cpu 유틸리티를 사용해서 다시 CPU로 강제할 수 있어요.

변환 제거하기 (Removing transforms)

transform-none 유틸리티를 사용하면 요소의 모든 변환을 한 번에 제거할 수 있어요.

<div class="skew-y-3 md:transform-none">
  <!-- ... -->
</div>

커스텀 값 사용하기 (Using a custom value)

transform-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 변환을 설정할 수 있어요.

<div class="transform-[matrix(1,2,3,4,5,6)] ...">
  <!-- ... -->
</div>

CSS 변수를 쓸 때는 transform-(<custom-property>) 문법을 사용할 수도 있어요.

<div class="transform-(--my-transform) ...">
  <!-- ... -->
</div>

이것은 transform-[var(<custom-property>)]의 줄임 표현이에요. var() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.

더 알아보기 (Learn more)