33. transform: translate, rotate, scale, skew

CSS: Трансформации (transform: translate, rotate, scale, skew)

Иллюстрация к уроку Трансформации в CSS позволяют изменять внешний вид элементов, не меняя их положение в потоке документа. Это мощный инструмент для создания динамичных и интересных интерфейсов. В этом уроке мы рассмотрим основные трансформации: перемещение (translate), вращение (rotate), масштабирование (scale) и наклон (skew).

Основы трансформаций

Свойство transform в CSS позволяет применять различные трансформации к элементам. Оно принимает одну или несколько трансформационных функций, разделенных пробелами. Важно помнить, что трансформации применяются относительно центра элемента, если не указано другое значение для свойства transform-origin.

Перемещение (translate)

Функция translate() перемещает элемент по горизонтали (X) и вертикали (Y).

.element {
  transform: translate(50px, 100px); /* Перемещает элемент на 50px вправо и 100px вниз */
}

Можно использовать translateX() и translateY() для перемещения только по одной оси:

.element {
  transform: translateX(50px); /* Перемещает элемент на 50px вправо */
}

.element {
  transform: translateY(100px); /* Перемещает элемент на 100px вниз */
}

Вращение (rotate)

Функция rotate() вращает элемент на указанный угол в градусах (deg).

.element {
  transform: rotate(45deg); /* Вращает элемент на 45 градусов по часовой стрелке */
}

.element {
  transform: rotate(-90deg); /* Вращает элемент на 90 градусов против часовой стрелки */
}

Масштабирование (scale)

Функция scale() изменяет размер элемента. Значение 1 означает отсутствие масштабирования. Значения больше 1 увеличивают элемент, а значения меньше 1 уменьшают.

.element {
  transform: scale(1.5); /* Увеличивает элемент в 1.5 раза */
}

.element {
  transform: scale(0.5); /* Уменьшает элемент в 2 раза */
}

.element {
  transform: scale(2, 0.5); /* Увеличивает элемент в 2 раза по горизонтали и уменьшает в 2 раза по вертикали */
}

Можно использовать scaleX() и scaleY() для масштабирования только по одной оси:

.element {
  transform: scaleX(2); /* Увеличивает элемент в 2 раза по горизонтали */
}

.element {
  transform: scaleY(0.5); /* Уменьшает элемент в 2 раза по вертикали */
}

Наклон (skew)

Функция skew() наклоняет элемент по горизонтали (X) и вертикали (Y). Угол наклона задается в градусах (deg).

.element {
  transform: skew(30deg, 20deg); /* Наклоняет элемент на 30 градусов по горизонтали и 20 градусов по вертикали */
}

Можно использовать skewX() и skewY() для наклона только по одной оси:

.element {
  transform: skewX(30deg); /* Наклоняет элемент на 30 градусов по горизонтали */
}

.element {
  transform: skewY(20deg); /* Наклоняет элемент на 20 градусов по вертикали */
}

Практический пример

<!DOCTYPE html>
<html>
<head>
  <title>CSS Transforms</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin: 20px;
      transition: transform 0.3s ease; /* Добавляем плавную анимацию */
    }

    .box:hover {
      transform: translate(20px, 10px) rotate(15deg) scale(1.2); /* При наведении применяем несколько трансформаций */
    }
  </style>
</head>
<body>
  <div class="box">Hover me!</div>
</body>
</html>

В этом примере при наведении курсора на элемент .box он перемещается, вращается и масштабируется. transition обеспечивает плавность трансформации.

Жизненный пример

Трансформации CSS широко используются в современных веб-проектах.

Анимации: Создание интерактивных эффектов при наведении курсора, прокрутке страницы и т.д. Например, при наведении на карточку товара можно немного увеличить ее размер и добавить тень.
Интерфейсы: Создание слайдеров, модальных окон, и других компонентов интерфейса, где требуется плавное перемещение и изменение размеров элементов.
Фреймворки: Многие CSS-фреймворки (например, Bootstrap, Tailwind CSS) используют трансформации для создания различных эффектов и анимаций.
Игры: В веб-играх трансформации могут использоваться для перемещения, вращения и масштабирования игровых объектов.

Ключевые моменты

transform позволяет изменять внешний вид элементов без изменения их положения в потоке документа.
Трансформации применяются относительно центра элемента по умолчанию. Это можно изменить с помощью transform-origin.
Можно применять несколько трансформаций одновременно, разделяя их пробелами.
transition позволяет создавать плавные анимации при изменении свойств transform.
Трансформации часто используются для создания интерактивных эффектов и анимаций в веб-интерфейсах.