Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

2D трансформации. Масштабирование CSS: Transform (трансформация объектов)

Масштабирование — возможность увеличивать или уменьшать элемент на определённый коэффициент. Это полезный трюк, который очень часто используется в анимациях. Например, вы могли его встречать при наведении курсора на какой-либо элемент. В таком случае масштабирование используется во время события hover. Попробуйте навести курсор мыши на квадрат в следующем примере:

Для масштабирования квадрата использовалась функция scale() свойства transform. В качестве значения может быть указано одно или два числа. На самом деле таких чисел может быть и три, но подробнее об этом мы поговорим в уроке, посвящённом масштабированию в 3D.

  • Одно значение: масштабирование происходит на одинаковый коэффициент и по оси x и по оси y. Именно одно значение было использовано в примере выше.
  • Два значения: в качестве первого значения передаётся масштабирование по оси x, а в качестве второго аргумента масштабирование по оси y.

Но что именно масштабируется? Если вы попробовали навести курсор в прошлом примере, то заметили, что масштабировался не только сам квадрат, но и текст внутри него. Именно так и будет происходит: функция scale() влияет на всё, что расположено внутри блока и на него самого.

Стандартным значением функции scale() является единица. Вы можете думать о значениях, как об процентах, где единица равна 100%. Таким образом достаточно просто определить диапазон возможных значений: 0 <= x < ∞. Или, другими словами, функция scale() принимает значение от нуля до бесконечности. Если элемент получит масштабирование со значением ноль, то он просто скроется. Мы можем увеличивать объект до абсолютно любого размера. Но так обычно не делают :)

Любое значение меньше единицы уменьшает элемент, а больше единицы увеличивает его. Обратите внимание, что число не обязательно должно быть целым. В качестве значения могут выступать и такие: scale(1.2), scale(0.3), scale(2.1) и так далее. Главное — использовать разделитель в виде точки, иначе вы случайно укажете два разных значения: для оси x и для оси y.

Пример выше хоть и выглядит достаточно простым, но кроет в себе несколько важных моментов, о которых стоит помнить:

  1. Функция scale() не влияет на HTML элементы, расположенные рядом. Попробуйте убрать свойство transform у блока с классом square blue. Вы увидите, что он окажется под зелёным блоком, ровно в том месте, где и был бы без использования свойства transform. То есть элемент ведёт себя так, как будто у него установлено относительное позиционирование.
  2. По умолчанию, зелёный элемент оказался выше красного. Здесь происходит контекст наложения элементов друг на друга и он такой же, как и при использовании абсолютного позиционирования: блоки, расположенные ниже в HTML, по умолчанию, будут располагаться выше в контексте наложения, если не указать иного с помощью свойства z-index.

На самом деле, вы можете указать отрицательное значение для любого направления при использовании функции scale. Но что это даст? Представьте, что происходит с элементом, когда его масштабирование по оси x стремится к нулю. Элемент всё больше начинается сплющиваться до тех пор, пока значение не станет нулём. Элемент визуально исчезнет, хотя, на самом деле он продолжит своё существование. Если дать теперь отрицательное значение, то элементу нужно расти, но куда? Правильно — в противоположную сторону. Таким образом мы увидим элемент как если бы находились позади него, или, по-простому, мы отзеркалим элемент по оси x.

Точка трансформации и масштабирование

При использовании scale вы так же можете установить произвольную точку трансформации с помощью transform-origin.

Зачастую в этом нет особого смысла, кроме как в использовании одного из четырёх стандартных значений:

  • top
  • right
  • bottom
  • left

Что же произойдёт при использовании этих значений? На самом деле всё будет работать так, как и надо — мы просто сменим точку трансформации. Но в случае с масштабированием не очень понятно, о чём пойдёт речь, поэтому свойство часто используют для контроля за месторасположением элемента после трансформации.

Вернёмся к первому примеру урока:

После применения scale(1.5) к центральному блоку он немного сменил своё расположение, так как трансформировался от центральной точки элемента. Именно от неё произошло увеличение. Но что делать, если мы хотим увеличить элемент, но оставить верхнюю левую точку там, где она была бы до применения трансформации? Это может быть очень полезно при создании анимации, так как мы уверены в том, где элемент будет находиться.

Именно здесь пригодится свойство transform-origin. Как было сказано в прошлых уроках, оно может принимать одно или несколько значений:

  • Одно значение — установка точки трансформации по оси x.
  • Два значения — установка точки трансформации по осям x и y.

Воспользуемся этими значениями и укажем, что центральный блок должен иметь точку трансформации в следующем виде:

  • По оси x точка трансформации должна находиться слева
  • По оси y точка трансформации должна находиться сверху

Таким образом точкой трансформации станет верхний левый угол, а значит масштабирование будет происходит именно от этой точки, что не даст ей переместиться:

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

Дополнительное задание

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


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Изображение Тото

Задавайте вопросы, если хотите обсудить теорию или упражнения. Команда поддержки Хекслета и опытные участники сообщества помогут найти ответы и решить задачу