Перемещение, вращение и масштабирование
Перемещайте элементы с помощью translate(), вращайте их через rotate() и изменяйте размер с помощью scale().
«Перемещение, вращение и масштабирование» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Свойство преобразования
transform применяет к элементам визуальные двухмерные и трёхмерные преобразования: перемещение, вращение, масштабирование и наклон. Преобразования выполняются после компоновки — они не влияют на соседние элементы.
translate()
Перемещает элемент из его текущего положения. Аргументы: смещение по осям x и y.
<div class="card demo-active">Card</div>
<div class="wrap"><div class="centered">Centered</div></div>translateX() translateY() translateZ()
Отдельные функции для каждой оси, чтобы код было понятнее:
<div class="slide-in active">Slide panel</div>rotate()
Поворачивает элемент на заданный угол. Положительные значения поворачивают по часовой стрелке.
<span class="icon demo-active">➤</span>
<span class="spinner">➤</span>scale()
Изменяет масштаб элемента равномерно или по отдельным осям. Значения меньше 1 уменьшают элемент, а больше 1 — увеличивают.
<button class="btn demo-active">Button</button>
<div class="thumb demo-active">Thumb</div>scaleX() и scaleY()
Независимое изменение масштаба по одной оси:
<div class="logo">LOGO</div>Объединение преобразований
Несколько функций преобразования применяются по порядку (справа налево). Порядок влияет на результат.
<div class="card demo-active">Card</div>Начало преобразования
transform-origin задаёт точку вращения и масштабирования. По умолчанию это центр (50% 50%).
<div class="card demo-active">Card</div>Отдельные свойства преобразования
Современный CSS позволяет задавать отдельные функции преобразования как отдельные свойства:
<div class="card demo-active">Card</div>Переходы с преобразованиями
Преобразование — одно из двух свойств, обрабатываемых GPU в отдельном композитном слое. Для плавных и производительных эффектов всегда анимируйте его с помощью перехода:
<div class="card demo-active">Card</div>translate() и top/left
При анимации всегда отдавайте предпочтение transform: translate(), а не top/left. Преобразование композитируется на GPU, а top/left вызывают перерасчёт макета на каждом кадре.
Быстрая проверка
Какая функция преобразования зеркально отражает элемент по горизонтали, например переворачивает карточку?
Итоги
transform перемещает, поворачивает и масштабирует элементы после компоновки, не влияя на окружающее содержимое. Используйте translate() для перемещения, rotate() для вращения и scale() для изменения размера. Объединяйте несколько функций в одном объявлении. Современный CSS поддерживает отдельные свойства преобразования. Для плавной анимации с обработкой на GPU всегда используйте переходы.
Часто задаваемые вопросы
Урок «Перемещение, вращение и масштабирование» бесплатный?
Да — полный текст урока «Перемещение, вращение и масштабирование» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Перемещение, вращение и масштабирование»?
Перемещайте элементы с помощью translate(), вращайте их через rotate() и изменяйте размер с помощью scale(). Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Перемещение, вращение и масштабирование»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Перемещение, вращение и масштабирование
- Искажение и матричные преобразования
- Начало преобразования и перспектива
- Трёхмерные преобразования: rotateX, rotateY, translateZ