Трансформации
Утилиты для трансформации элементов.
| 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); |
Если ваша анимация работает лучше при рендеринге на GPU вместо CPU, вы можете принудительно включить аппаратное ускорение, добавив утилиту 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().