트랜스폼
transform
엘리먼트 변형을 위한 유틸리티입니다.
| 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); |
예제
하드웨어 가속
트랜지션이 CPU 대신 GPU에서 렌더링될 때 더 나은 성능을 보인다면, transform-gpu 유틸리티를 추가하여 하드웨어 가속을 강제할 수 있습니다:
<div class="scale-150 transform-gpu"> <!-- ... --></div>이 설정을 조건적으로 되돌려야 할 때는 transform-cpu 유틸리티를 사용하여 CPU로 강제로 되돌릴 수 있습니다.
변형 제거하기
transform-none 유틸리티를 사용하면 엘리먼트에 적용된 모든 변형을 한 번에 제거할 수 있습니다:
<div class="skew-y-3 md:transform-none"> <!-- ... --></div>커스텀 값 사용하기
transform-[<value>] 구문을 사용하세요 transform를 완전히 커스텀한 값으로 설정하려면:
<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() 함수를 추가해 줍니다.
