34. transform-origin

CSS: Свойство `transform-origin`

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

Что такое `transform-origin`?

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

Как использовать `transform-origin`?

Свойство transform-origin принимает одно, два или три значения, представляющих собой координаты X, Y и Z (для 3D трансформаций) точки начала трансформации. Значения могут быть указаны в пикселях, процентах, или с использованием ключевых слов, таких как top, bottom, left, right, и center.

Примеры:

transform-origin: 0 0; - Верхний левый угол.
transform-origin: 50% 50%; - Центр (значение по умолчанию).
transform-origin: top left; - То же, что и 0 0;
transform-origin: 20px 30px; - Смещение на 20px вправо и 30px вниз от верхнего левого угла.
transform-origin: bottom right; - Нижний правый угол.

Пример кода:

<!DOCTYPE html>
<html>
<head>
<title>transform-origin example</title>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 50px;
  transition: transform 0.5s ease;
}

.box:hover {
  transform: rotate(45deg);
}

.origin-top-left {
  transform-origin: top left;
}

.origin-bottom-right {
  transform-origin: bottom right;
}
</style>
</head>
<body>

<div class="box">Default Origin</div>
<div class="box origin-top-left">Top Left Origin</div>
<div class="box origin-bottom-right">Bottom Right Origin</div>

</body>
</html>

В этом примере, при наведении курсора на первый квадрат (.box), он вращается вокруг своего центра (по умолчанию). Второй квадрат (.box origin-top-left) вращается вокруг своего верхнего левого угла, а третий (.box origin-bottom-right) вокруг нижнего правого.

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

transform-origin широко используется в веб-разработке для создания анимаций и интерактивных элементов. Например:

Анимация меню: Кнопка “гамбургер” (три горизонтальные линии) часто трансформируется в крестик при открытии меню. transform-origin используется для того, чтобы линии вращались вокруг своих концов, создавая плавный и естественный переход.
Вращающиеся элементы интерфейса: Индикаторы загрузки, анимированные иконки, вращающиеся логотипы – все это часто реализуется с помощью transform и transform-origin.
Масштабирование изображений: При увеличении изображения при наведении курсора, transform-origin позволяет контролировать, какая часть изображения остается на месте.

Многие CSS-фреймворки и библиотеки, такие как Bootstrap, Tailwind CSS, и Animate.css, используют transform-origin внутри своих компонентов и анимаций.

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

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

34. transform-origin

CSS: Свойство transform-origin

Что такое transform-origin?

Как использовать transform-origin?

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

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

Интерактивный пример

CSS: Свойство `transform-origin`

Что такое `transform-origin`?

Как использовать `transform-origin`?