Геометрические преобразования HTML элементов

Современные интерфейсы — это не только сетки и выравнивание. Чтобы страница выглядела «живой», используются:

• анимации,
• эффекты при наведении,
• плавные переходы,
• визуальные акценты.

Одним из ключевых инструментов для таких эффектов является свойство transform.

Оно позволяет изменять положение, размер и форму элемента без изменения его потока в документе.

Что такое transform

CSS-свойство transform позволяет применять к элементу различные геометрические преобразования:

• смещение,
• масштабирование,
• вращение,
• наклон.

Важно понимать, что transform изменяет визуальное отображение элемента, но не влияет на расположение других элементов в потоке.

Основные функции transform

Свойство transform в качестве значений принимает различные функции трансформации. Давайте рассмотрим основные из них.

Смещение — translate()

Функция используется для смещения элемента вверх-вниз или влево-вправо:

.box {
  transform: translate(50px, 20px);
}
css

В целом, ту же работу выполняют CSS-свойства top, right, bottom, left — например, для абсолютно (position: absolute) или относительно (position: relative) спозиционированных элементов. Но есть ряд важных отличий: элемент позиционируется относительно соответствующих сторон родителя. То есть left: 20px сместит элемент на 20 пикселей относительно левой границы родителя, а translate(20px) сместит элемент вправо относительно того места, где тот находился до трансформации.

В целом, позиционирование и translate прекрасно сочетаются друг с другом. Позиционирование лучше использовать для изначального расположения элемента на странице, а translate применять, если нужно добавить анимации движения.

Функция принимает два параметра: первый параметр отвечает за смещение вправо-влево, а второй параметр — вверх-вниз. В качестве аргументов функции можно использовать как абсолютные, так и относительные значения. Также можно использовать отрицательные значения, для того чтобы задать смещение в противоположную сторону.

Кроме transform существуют функции для смещения только по одной оси - translateX и translateY.

Не так давно в CSS появилась возможность использовать третье измерение с помощью функции translate3d(X, Y, Z).

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

Следующая функция scale позволяет масштабировать элемент. Она может принимать один, два или три аргумента. Если передать один аргумент, то его значение примениться ко всем осям элемента, а два или три значения применяться по отдельности к осям X, Y, Z.

.box {
  transform: scale(1.2);
}
css

В качестве значений функция scale принимает положительные числа или 0. Передаваемое число - это буквально масштаб:

• если передать 0 то элемент будет скрыт (размеры умножаться на 0);
• если передать 1 - это будет исходный размер;
• значения от 0 до 1 уменьшат размер элемента;
• значения больше 1 увеличивают элемент.

Масштабирование в 3-х мерном пространстве можно задать функицей scale3d(X, Y, Z) или по осям по отдельности с помощью scaleX(X), scaleY(Y), scaleZ(Z).

Вращение — rotate()

Функция rotate позволяет вращать элемент. Эту функцию можно использовать как с указанием осей rotateX(X), rotateY(Y), rotateZ(Z), так и без. Если мы используем rotate без указания оси, то вращение будет происходить по оси Z. Для вращения сразу по трем осям используется rotate3d(X, Y, Z).

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

Для параметров функции можно использовать следующие единиц измерения:

• deg - градусы,
• rad - радианы,
• turn - полные обороты

Наклон — skew()

Функция skew() позволяет выполнить сдвиг одной стороны элемента относительно противолежащей. В результате элемент как бы наклоняется. Подробнее об использовании этой функции можно прочитать например в статье "Искажаем и наклоняем элементы с пониманием".

Другие функции

Существуют и другие функции для геометрических преобразований, например perspective() или matrix(). Почитать о них подробнее можно на страницах developer.mozilla.org.

Несколько преобразований одновременно

В свойстве transform можно комбинировать несколько функций одновременно:

.box {
  transform: translateY(-10px) scale(1.05) rotate(2deg);
}
css

Преобразования выполняются слева направо.

Кроме использования свойства transform для функций rotate, translate и scale в стандарт CSS недавно были добавлены отдельные свойства. Например, свойство scale можно задавать таким образом:

.box {
  transform: scale(1.2);
}

.box {
  scale: 1.2;
}
css

Это удобно если у вас есть необходимость применять несколько классов с разными преобразованиями к одному и тому же элементу.

Точка трансформации — transform-origin

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

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

Теперь элемент будет вращаться или масштабироваться относительно верхнего левого угла.

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