Các utility để biến đổi phần tử.
| 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); |
Nếu transition của bạn hoạt động tốt hơn khi được render bởi GPU thay vì CPU, bạn có thể bắt buộc tăng tốc phần cứng bằng cách thêm utility transform-gpu:
<div class="scale-150 transform-gpu"> <!-- ... --></div>Sử dụng utility transform-cpu để buộc mọi thứ quay lại CPU nếu bạn cần hoàn tác điều này có điều kiện.
Sử dụng utility transform-none để xóa tất cả các biến đổi trên một phần tử cùng một lúc:
<div class="skew-y-3 md:transform-none"> <!-- ... --></div>Use the transform-[<value>] syntax to set the transform based on a completely custom value:
<div class="transform-[matrix(1,2,3,4,5,6)] ..."> <!-- ... --></div>For CSS variables, you can also use the transform-(<custom-property>) syntax:
<div class="transform-(--my-transform) ..."> <!-- ... --></div>This is just a shorthand for transform-[var(<custom-property>)] that adds the var() function for you automatically.