Масштабирование — возможность увеличивать или уменьшать элемент на определённый коэффициент. Это полезный трюк, который очень часто используется в анимациях. Например, вы могли его встречать при наведении курсора на какой-либо элемент. В таком случае масштабирование используется во время события hover
. Попробуйте навести курсор мыши на квадрат в следующем примере:
Для масштабирования квадрата использовалась функция scale()
свойства transform
. В качестве значения может быть указано одно или два числа. На самом деле таких чисел может быть и три, но подробнее об этом мы поговорим в уроке, посвящённом масштабированию в 3D.
Но что именно масштабируется? Если вы попробовали навести курсор в прошлом примере, то заметили, что масштабировался не только сам квадрат, но и текст внутри него. Именно так и будет происходит: функция scale()
влияет на всё, что расположено внутри блока и на него самого.
Стандартным значением функции scale()
является единица. Вы можете думать о значениях, как об процентах, где единица равна 100%. Таким образом достаточно просто определить диапазон возможных значений: 0 <= x < ∞
. Или, другими словами, функция scale()
принимает значение от нуля до бесконечности. Если элемент получит масштабирование со значением ноль, то он просто скроется. Мы можем увеличивать объект до абсолютно любого размера. Но так обычно не делают :)
Любое значение меньше единицы уменьшает элемент, а больше единицы увеличивает его. Обратите внимание, что число не обязательно должно быть целым. В качестве значения могут выступать и такие: scale(1.2)
, scale(0.3)
, scale(2.1)
и так далее. Главное — использовать разделитель в виде точки, иначе вы случайно укажете два разных значения: для оси x и для оси y.
Пример выше хоть и выглядит достаточно простым, но кроет в себе несколько важных моментов, о которых стоит помнить:
scale()
не влияет на HTML элементы, расположенные рядом. Попробуйте убрать свойство transform
у блока с классом square blue
. Вы увидите, что он окажется под зелёным блоком, ровно в том месте, где и был бы без использования свойства transform
. То есть элемент ведёт себя так, как будто у него установлено относительное позиционирование.z-index
.На самом деле, вы можете указать отрицательное значение для любого направления при использовании функции scale
. Но что это даст? Представьте, что происходит с элементом, когда его масштабирование по оси x стремится к нулю. Элемент всё больше начинается сплющиваться до тех пор, пока значение не станет нулём. Элемент визуально исчезнет, хотя, на самом деле он продолжит своё существование. Если дать теперь отрицательное значение, то элементу нужно расти, но куда? Правильно — в противоположную сторону. Таким образом мы увидим элемент как если бы находились позади него, или, по-простому, мы отзеркалим элемент по оси x.
При использовании scale
вы так же можете установить произвольную точку трансформации с помощью transform-origin
.
Зачастую в этом нет особого смысла, кроме как в использовании одного из четырёх стандартных значений:
top
right
bottom
left
Что же произойдёт при использовании этих значений? На самом деле всё будет работать так, как и надо — мы просто сменим точку трансформации. Но в случае с масштабированием не очень понятно, о чём пойдёт речь, поэтому свойство часто используют для контроля за месторасположением элемента после трансформации.
Вернёмся к первому примеру урока:
После применения scale(1.5)
к центральному блоку он немного сменил своё расположение, так как трансформировался от центральной точки элемента. Именно от неё произошло увеличение. Но что делать, если мы хотим увеличить элемент, но оставить верхнюю левую точку там, где она была бы до применения трансформации? Это может быть очень полезно при создании анимации, так как мы уверены в том, где элемент будет находиться.
Именно здесь пригодится свойство transform-origin
. Как было сказано в прошлых уроках, оно может принимать одно или несколько значений:
Воспользуемся этими значениями и укажем, что центральный блок должен иметь точку трансформации в следующем виде:
Таким образом точкой трансформации станет верхний левый угол, а значит масштабирование будет происходит именно от этой точки, что не даст ей переместиться:
Именно использование свойства transform-origin
позволяет добиться эффекта появления элемента слева направо, как часто бывает при наведении на элемент. Попробуйте в следующем примере навести курсор мыши на иконку подписки.
Используя примеры выше изменяйте точки трансформации у различных элементов. Добейтесь уверенного представления того, как поведёт себя элемент при тех или иных значениях свойства transform-origin
.
Вам ответят команда поддержки Хекслета или другие студенты.
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Зарегистрируйтесь или войдите в свой аккаунт
Задавайте вопросы, если хотите обсудить теорию или упражнения. Команда поддержки Хекслета и опытные участники сообщества помогут найти ответы и решить задачу