Css transform translate: translate() — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

Translate — Tailwind CSS

​Основное использование

​Перевод элемента

Используйте утилиты translate-x-{amount} и translate-y-{amount} для перевода элемента.

 <изображение>
<изображение>

​Использование отрицательных значений

Чтобы использовать отрицательное значение перевода, поставьте перед именем класса дефис, чтобы преобразовать его в отрицательное значение.

​Удаление преобразований

Чтобы удалить сразу все преобразования элемента, используйте кнопку transform-none утилита:

Это может быть полезно, если вы хотите удалить преобразования по условию, например, при наведении или в определенной точке останова.

​Аппаратное ускорение

Если ваш переход работает лучше при рендеринге с помощью графического процессора, а не центрального процессора, вы можете принудительно ускорить аппаратное ускорение, добавив утилиту transform-gpu :

Используйте transform-cpu для принудительного возврата к ЦП, если вам нужно отменить это условно.

​Условное применение

​Наведение, фокус и другие состояния

Tailwind позволяет вам условно применять служебные классы в различных состояниях с помощью модификаторов вариантов. Например, используйте hover:translate-y-12 , чтобы применять утилиту translate-y-12 только при наведении.

 <дел>

Полный список всех доступных модификаторов состояния см. в документации Hover, Focus и других состояний.

​Точки останова и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как чувствительные точки останова, темный режим, предпочтения с уменьшенным движением и т. д. Например, используйте md:translate-y-12 , чтобы применить утилиту translate-y-12 только на экранах среднего размера и выше.

 <дел>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.

​Использование пользовательских значений

​Настройка вашей темы

По умолчанию Tailwind предоставляет фиксированное значение для перевода утилит, которые соответствуют шкале интервалов по умолчанию, а также вариации 50% и 100% для перевода относительно размера элемента. Вы можете настроить шкалу интервалов, отредактировав theme.spacing или theme.extend.spacing 9.0008 в файле tailwind.config.js .

tailwind.config.js

 module.exports = {
  тема: {
    продлевать: {
      интервал: {
        «4,25»: «17 бэр»,
      }
    }
  }
}

Кроме того, вы можете настроить только масштаб перевода, отредактировав theme.translate или theme.extend.translate в файле tailwind.config.

js .

tailwind.config.js

 module.exports = {
  тема: {
    продлевать: {
      переводить: {
        «4,25»: «17 бэр»,
      }
    }
  }
}

Узнайте больше о настройке темы по умолчанию в документации по настройке темы.

Произвольные значения

Если вам нужно использовать одноразовое значение translate , которое не имеет смысла включать в вашу тему, используйте квадратные скобки для создания свойства на лету, используя любое произвольное значение.

 <дел>

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.

2D-преобразования CSS3 | Могу ли я использовать... Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

2D-преобразования CSS3

- CR

  • Глобальное использование
    98,32% + 0% "=" 98,32%

Метод преобразования элемента, включая вращение, масштабирование и т.

д. Включает поддержку свойств transform , а также свойств transform-origin .

Chrome
  1. 4 - 35: поддержан
  2. 36 - 111: Поддержано
  3. 112: Поддержано
  4. 113 - 115: Поддержка
EDGE

1111111111111111111111111111111111111111111111111114ERDED

1111111111111111111111111111111111111111114ERDED.
  • 111: поддержан
    • Safari
    1. 3,1 - 8: Поддерживается
    2. 9 - 16,3: Поддерживается
    3. 16,4: поддержан
    4. 16,5 -TP: Подподдертал
      5. 70127 70127 70127 70127 70127. 0127
    5. 3,5 - 15: Поддерживается
    6. 16 - 110: Поддерживается
    7. 111: Поддерживается
    8. 112 - 113: поддержано
    Opera

    1. 5

      2. 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777.. Поддерживается
    2. 15 - 22: Поддержано
    3. 23 - 94: Поддержано
    4. 95: Поддержано
    IE
    1. 5.5: Недоставленный
    2. 07% - Not supported (but has polyfill available)"> 6: НЕТ поддержка (но не поддержал (но не поддержал, но не поддерживал 9027
    3. 6: не поддерживает (но не поддержал, но не поддерживает
    4. 6: не поддерживает (но не поддержал, но не поддерживал
    5. 6: не поддерживает (но не поддержал
      6. .
    6. 10: Supported
    7. 11: Supported
    Chrome for Android
    1. 111: Supported
    Safari on iOS
    1. 3.2 - 8.4: Supported
    2. 9 - 16.3: Supported
    3. 12% - Supported"> 16.4: Supported
    4. 16.5: поддерживается
    Samsung Internet
    1. 4–19.0: поддерживается
    2. 20: поддерживается
    Opera Mini
    1. все: Opera Mini
      1. все: Opera
      2. Mobile0126
        1. 10: Not supported
        2. 11 - 12.1: Supported
        3. 73: Supported
        UC Browser for Android
        1. 13.4: Supported
        Android Browser
        1. 2.1 - 4.4.4: Supported