CSS свойство перевода

❮ Назад Полное руководство по CSS Далее ❯


Пример

Изменить положение элемента:

div {
перевести: 100px 20px;
}

Попробуйте сами »

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

Свойство translate позволяет изменять положение элементов.

Свойство translate определяет координаты x и y элемента в 2D. Вы также можете определить z-координату для изменения положения в 3D.

Координаты могут быть заданы только как координаты x, координаты x и y или координаты x, y и z.

Чтобы лучше понять свойство перевести , посмотреть демо.

Совет: Чтобы z-свойство вступило в силу, необходимо определить значение свойства CSS перспектива .

Примечание: Альтернативным способом перевода элемента является использование свойства CSS transform с функцией CSS translate() . CSS 9Свойство 0019 translate , как объясняется на этой веб-странице, возможно, является более простым и прямым способом перевода элемента.

Показать демо ❯

Значение по умолчанию: нет
По наследству: нет
Анимация: да. Читать о анимированном Попробуй
Версия: CSS3
Синтаксис JavaScript: объект .style.translate=»10px 20px» Попробуй

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
перевод 104 104 72 14,1 90

Синтаксис CSS

translate: ось x ось y ось z |initial|inherit;

Значения свойств

Значение свойства Описание Демо
ось X Определяет положение по оси x. Возможные значения:
  • длина
  • %
Демонстрация ❯
ось Y Определяет положение по оси Y. Возможные значения:
  • длина
  • %
Демонстрация ❯
ось Z Определяет положение по оси Z. Возможные значения:
  • длина
Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать о инициал
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Дополнительные примеры

Пример

Когда свойство перевести для оси Z установлено, свойство перспектива также должно быть установлено на родительском элементе, прежде чем мы сможем увидеть какой-либо эффект:

DIV1 {
  перспектива: 200 пикселей;
}

РАЗДЕЛ 2 {
  перевести: 50px 50px 50px;
}

Попробуйте сами »

Связанные страницы

Учебник CSS: 2D-преобразования CSS

Учебник CSS: 3D-преобразования CSS

Свойство масштаба CSS: Свойство масштаба CSS

Свойство поворота CSS: свойство поворота CSS

CSS Свойство перспективы: Свойство перспективы CSS

❮ Назад Полное руководство по CSS Далее ❯

ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
9000 3

Основные каталожные номера
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Translate — Tailwind CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

hover:translate-y-12 , чтобы применить только translate-y-12 9Утилита 0020 при наведении.

 <дел>

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

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

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как чувствительные точки останова, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте

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

 <дел>