CSS - Translate Property: Moving Elements with Style

Здравствуйте, будущие маги CSS! Сегодня мы отправимся в увлекательное путешествие в мир CSS-трансформаций, Specifically focusing on the translate property. Как ваш доброжелательный сосед-преподаватель компьютера, я здесь, чтобы помочь вам ориентироваться в этом magic realm, где мы можем передвигать элементы наших веб-страниц, не потея. Так что пристегнитесь и погружайтесь!

CSS - Translate

Что такое CSS Translate Property?

Прежде чем мы начнем передвигать вещи, давайте поймем, что же на самом деле делает translate property. Короче говоря, он позволяет нам передвигать элемент с его текущего места, не влияя на раскладку других элементов. Это как иметь magic wand, который может поднимать и передвигать элементы на вашей веб-странице!

Реальный мир аналогии

Представьте, что вы расставляете мебель в комнате. translate property как поднимать стул и передвигать его в другое место, не беспокоя ничего другого. Круто, правда?

Возможные значения

Свойство translate может принимать различные типы значений. Давайте разберем их:

Тип значения	Описание	Пример
Длина	Конкретные единицы, такие как px, em, rem	`translate(50px, 20px)`
Процент	Относительно размера элемента	`translate(50%, 20%)`
Ключевые слова	Специальные значения, такие как `none`	`translate(none)`

Применяется к

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

<div> контейнеры
Изображения (<img>)
Кнопки (<button>)
Текстовые элементы (<p>, <span>, и т.д.)

Синтаксис DOM

Работая с JavaScript, вам может потребоваться получить или изменить значение translate свойства. Вот как это можно сделать:

// Получение значения translate
let currentTranslate = element.style.translate;

// Установка значения translate
element.style.translate = "50px 20px";

Теперь давайте перейдем к практическим примерам!

CSS Translate - Нет Translation Set

Иногда вы можете хотите explicitly указать, что элемент не должен быть переведен. Вот как это сделать:

.no-move {
translate: none;
}

Это как сказать вашему элементу: "Stay put, buddy! No moving around for you."

CSS Translate - Использование Length-Percentage для Translate на X-оси

Давайте начнем с простого горизонтального движения:

.move-right {
translate: 100px;
}

Это переместит наш элемент на 100 пикселей вправо. Это как слегка толкнуть ваш элемент и сказать: "Scoot over a bit, will ya?"

CSS Translate - Использование Length-Percentage для Translate на Y-оси

Теперь давайте переместим вещи вверх и вниз:

.move-down {
translate: 0 50px;
}

Это переместит наш элемент на 50 пикселей вниз. Первое значение (0) означает отсутствие горизонтального движения, а второе значение (50px) означает 50 пикселей вниз.

CSS Translate - Использование Length-Percentage для Translate на Z-оси

Вещи становятся真的很 интересными, когда мы начинаем двигаться в 3D! Вот как можно переместить элемент "ближе" или "дальше" от зрителя:

.move-closer {
translate: 0 0 -50px;
}

Это переместит элемент на 50 пикселей ближе к зрителю. Это как элемент вылетает из экрана!

CSS Translate - Использование Length-Percentage для Translate на X и Y осях

Давайте combine horizontal и vertical движения:

.move-diagonally {
translate: 100px 100px;
}

Это переместит наш элемент на 100 пикселей вправо и 100 пикселей вниз. Это как сказать вашему элементу: "Go to the corner!"

CSS Translate - Использование Length-Percentage для Translate на Y и Z осях

Перемещение вертикольно и в глубину:

.float-down {
translate: 0 50px 20px;
}

Это переместит элемент на 50 пикселей вниз и на 20 пикселей дальше от зрителя. Это создает微妙ный 3D эффект!

CSS Translate - Использование Length-Percentage для Translate на X и Z осях

Давайте combine horizontal движение с глубиной:

.slide-away {
translate: 100px 0 50px;
}

Это переместит элемент на 100 пикселей вправо и на 50 пикселей дальше от зрителя. Это как элемент съезжает в сторону и в глубину.

CSS Translate - Использование Length-Percentage для Translate на X, Y и Z осях

Наконец, давайте передвинемся во всех трех измерениях:

.move-everywhere {
translate: 100px 50px 25px;
}

Это переместит наш элемент на 100 пикселей вправо, 50 пикселей вниз и на 25 пикселей дальше от зрителя. Это как дать вашему элементу complete freedom чтобы wander в 3D пространстве!

Заключение

И вот вы его,folks! Мы отправились в путешествие по чудесному миру CSS-трансформаций. Помните, с большой властью приходит большая ответственность. Используйте эти трансформации мудро, чтобы создавать увлекательные и динамичные веб-страницы.

Before I let you go, here's a little tip from your friendly neighborhood computer teacher: Always test your translations on different devices and browsers. What looks perfect on your computer might look a bit off on someone else's phone.

Now go forth and translate your web elements to new heights (and widths, and depths)! Happy coding!

Credits: Image by storyset