Transform translate: translate() — CSS: Cascading Style Sheets

«transform» — перевод на русский

научете английски онлайн / английско-български речник / transform — превод на български

Онлайн речник

Помощь

С помощью нашего словаря Вы сможете:

• проверить правильность написания слова;
• узнать, где следует ставить ударение;
• а также, получить полный список склонений и спряжений.

Как это работает?

1. Начните ввод слова.
2. После ввода первых символов, внизу (под полем ввода) сразу же появится ниспадающий список вариантов.
3. Выберите свой вариант.

РускиБългарскиАнглийскиПолски

РускиБългарскиАнглийскиПолски

Напишете думата

transform

Превод

преобразувам

трансформирам

Часть речи: глагол

A B C D E F G H I J K L M N O P Q R S T U V W Y Z

table tablet tact tailor tailored take take a bath take a photo take a shower take down take off take out take part take somebody somewhere take to talk talk talk about talking talking talking talk into talk over task tast tax taxi teach teacher (female) teaching teenager telecast tell temper temperature temple tennis tent term terrier test test text thank thanks thankы that theatrical theatrical performance their theirs them theme the Middle Ages themselves then then theorem thick soup think thinking thinking though thread three throat through throw away throw out thumb tick off till now time tired tired titan title to toaster to be to be a member to be called to be sick today today together to grow fat to myself tonight too tooth top top topic torn tortile to specify grammatical definiteness total total totalitarian totally touch touch down tour tourism tourist tourist towel tower town toy toy truck trace track tracksuit trade trade tradition traditional traffic light train trained trainer training transfer transform transitive translate transmit transport transportation travel travel traveling traveling traverse tray treat tree trial trial triangle trick trip trip true true truly trust try try on tulip tumble tune tune tunic tuning tunnel turn turn off turn on twist two two type

Внимание! Для отправки сообщения необходима авторизация!

Пожалуйста, выберите тему сообщения: Вопросы по программе обученияВопросы к службе технической поддержкиОшибка в тексте (звуковом файле, видео)Прочие вопросы

Хотите получить ответ по email?

Да, я хотел бы получить ответ.

перевести — CSS: Каскадные таблицы стилей

Свойство CSS translate позволяет задавать преобразования перевода индивидуально и независимо от свойства преобразования . Это лучше соответствует типичному использованию пользовательского интерфейса и избавляет от необходимости помнить точный порядок функций преобразования, чтобы указать значение преобразования .

 /* Значения ключевых слов */
перевести: нет;
/* Отдельные значения */
перевести: 100px;
перевести: 50%;
/* Два значения */
перевести: 100px 200px;
перевести: 50% 105px;
/* Три значения */
перевести: 50% 105px 5rem;
/* Глобальные значения */
перевести: наследовать;
перевести: начальный;
перевести: вернуться;
перевести: вернуть слой;
перевести: не установлен;
 

Значения

Одиночное <длина-процент> значение

<длина> или <процент> , задающий перемещение по оси X. Эквивалент функции translate() (2D-перевод) с одним указанным значением.

Два <процент длины> значений

Два <длина> или <процент> , которые определяют значения перемещения по осям X и Y (соответственно) для 2D-перемещения. Эквивалент функции translate() (2D-перевод) с двумя указанными значениями.

Три значения

Два значения и одно значение , которые определяют значения перемещения по осям X, Y и Z (соответственно) трехмерного перемещения. Эквивалент функции translate3d() (3D-перевод).

нет

Указывает, что перевод не должен применяться.

Начальная стоимость	Нет
Применяет к	.	как указано, но с преобразованием относительных длин в абсолютные
Тип анимации	a transform
Создает контекст наложения	да

 translate = 
 нет | 
 <процент длины> [ <процент длины> <длина>? ]? 
 "> = 
  | 
  
 

HTML

 

  
Перевод

 

CSS

 * {
  box-sizing: граница-коробка;
}
HTML {
  семейство шрифтов: без засечек;
}
дел {
  ширина: 150 пикселей;
  поле: 0 авто;
}
п {
  отступ: 10px 5px;
  граница: 3 пикселя, сплошной черный цвет;
  радиус границы: 20px;
  ширина: 150 пикселей;
  размер шрифта: 1. 2rem;
  выравнивание текста: по центру;
}
.перевести {
  переход: перевести 1с;
}
div: hover .translate {
  перевести: 200px 50px;
}
 

Результат

Спецификация
Уровень модуля преобразования CSS 2 # индивидуальные преобразования

Таблицы BCD загружаются только в браузере

с включенным JavaScript. Включите JavaScript для просмотра данных.

• шкала
• повернуть
• трансформировать

Примечание: перекос не является независимым значением преобразования

Последнее изменение: 27 сентября 2022 г. , участниками MDN

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

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

Пример

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

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

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

---

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

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

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

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

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

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

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

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

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

---

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

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

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

---

---

Синтаксис CSS

перевод: ось x ось y ось z |начальный|наследовать;

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

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

---

Другие примеры

Пример

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

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

DIV2 {
  перевести: 50px 50px 50px;
}

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

---

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

Учебник по CSS: CSS 2D Transforms

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

Свойство CSS Scale: Свойство CSS Scale

Свойство CSS rotate: Свойство CSS Rotate

Свойство CSS Perspective: Свойство CSS Perspective

❮ Назад Полное руководство по CSS Следующий ❯

НАБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки

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

Лучшие примеры Примеры HTML

Примеры CSS
Примеры JavaScript
How To Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

---

FORUM | О

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