Преобразование
Утилиты для управления поведением трансформации.
<img class="transform rotate-45 ...">
<img class="transform skew-y-12 ...">
<img class="transform scale-50 ...">
<img class="transform translate-x-4 translate-y-4 ...">Аппаратное ускорение
Многие преобразования могут выполняться на графическом процессоре вместо процессора. Это обеспечивает лучшую производительность. Вы можете использовать утилиту transform-gpu, чтобы включить ускорение графического процессора.
<div class="transform-gpu scale-150 ..."></div>Отключение
Если вы хотите отключить преобразования, вы можете использовать утилиту transform-none.
<div class="transform rotate-45 lg:transform-none ..."></div>Адаптивность
Чтобы включить или отключить преобразования в определенной контрольной точке, добавьте префикс {screen}: к любой из утилит преобразования. Например, используйте md:transform, чтобы применить утилиту transform только при средних размерах экрана и выше.
<img class="transform sm:transform-gpu md:transform-none ...">Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
Варианты
По умолчанию, только responsive варианты создаются для утилит transform.
Вы можете контролировать, какие варианты создаются для утилит transform для изменения свойства transform в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ transform: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения transform, Вы можете полностью отключить их, установив для transform свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ transform: false,
}
}