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

• Точка трансформации и масштабирование
• Дополнительное задание

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

https://codepen.io/hexlet/pen/PomKJyr

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

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

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

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

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

https://codepen.io/hexlet/pen/yLboPoP

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

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

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

https://codepen.io/hexlet/pen/abWrbJo

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

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

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

• top
• right
• bottom
• left

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

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

https://codepen.io/hexlet/pen/yLboPoP

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

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

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

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

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

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

https://codepen.io/hexlet/pen/ExmzQXL

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

https://codepen.io/hexlet/pen/abWebMg

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

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