CSS свойство transform

Свойство transform позволяет производить визуальные манипуляции с элементом, такие как поворот, масштабирование, смещение и вращение. Это может быть полезным для удержания внимания посетителей на различных фрагментах сайта. Анимированные блоки помогут улучшить навигацию на сайте, задержать внимание, и просто придадут свой уникальный стиль. Данные возможности появились в CSS3.

В качестве начало координат преобразования при изменении элементов используется свойство transform-origin.

Функция поддерживается большинством браузеров, в некоторых прежних версиях была реализована с префиксом -webkit-.

Синтаксис свойства CSS transform

transform: <функция> [<функция>]* | none

Здесь <функция> – это желаемое действие над элементом, например, rotate (вращение). None – отменяет действие.

Функции transform

Трансформации бывают как 2d, так и 3d. Вторые являются расширением двухмерных функций. Сначала рассмотрим более актуальные 2d варианты.

Translate

Функция задает смещение по горизонтали и вертикали. Например, зададим смещение объект по горизонтали на 30px и по вертикали на 20px.

.element {
  transform: translate(30px, 20px);
}

Возникает вопрос, зачем нужна эта функция, которая повторяет уже существующие возможности CSS по сдвигу элемента, например position? Но каких-то разъяснений не нашел.

Величина смещения может быть задана в любых применяемых в CSS единицах, например px или em. Если задать только один параметр, тогда смещение будет только по горизонтали. Отрицательные значения сдвигают элемент в противоположную сторону.

Также есть две функции для смещения элемента только одной оси X или Y.

transform: translateX(value);
transform: translateY(value);

Scale

Растягивание (масштабирование) блока на плоскости. Масштаб задается по осям x и y – scale(x,y). Если задано одно значение воздействие будет по двум осям сразу.

Создадим два блока с одинаковыми первоначальными размерами. Ко второму с красным прозрачным фоном применим transform: scale(2).

На демонстрации элемент с красным фоном увеличился в 2 раза.

See the Pen
scale by Андрей (@adlibi)
on CodePen.

Для масштабирования по одной оси есть соответствующие функции scaleX и scaleY.

С помощью них можно зеркально отразить элемент.

• transform: scale(-1, 1) — отразить по горизонтали;
• transform: scale(1, -1) — отразить по вертикали;
• transform: scale(-1, -1) — одновременно перевернуть изображение по горизонтали и вертикали.

Rotate

Разворачивает элемент на плоскости. Например, transform: rotate(45deg) повернет объект на 45% по часовой стрелке.

See the Pen
rotate by Андрей (@adlibi)
on CodePen.

Вы можете, например, повернуть текст на 90 градусов следующей инструкцией:

transform: rotate(90deg);

deg обозначает градус поворота.

Scew

Наклоняет элемент влево или вправо, превращая прямоугольник в параллелограмм. skew() – это сокращение, которое объединяет skewX() и skewY(), принимая оба значения.

На примере ниже к синему квадрату применено transform:skew(20deg) (наклон только по горизонтали), а к красному функция transform:skew(20deg, 30deg) (наклон по обоим осям).

See the Pen
skew by Андрей (@adlibi)
on CodePen.

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

Matrix

Matrix можно использовать для объединения всех преобразований в одно выражение. Но вручную создавать такие выражения невозможно. Существуют сервисы, вроде The Matrix Resolutions, которые позволяют делать такие построения.

Например через matrix следующие две функции

rotate(30deg) translate(20px, 20px)

будут записаны как:

transform: matrix(0.866025, 0.5, -0.5, 0.866025, 7.32051, 27.3205)

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

3D функции

Большинство описанных выше функций имеет свои 3d аналоги. Те функции, чье название содержит в конце Z, работают с осью Z. Те же, чьи названия заканчиваются на 3d принимают 3 параметра для работы со всеми тремя осями.

TranslateZ

TranslateZ сдвигают объект относительно его положения по оси Z на заданное значение. Но эффект от применения будет заметен только при использовании перспективы (perspective) и поворота элемента по осям X или Y.

Также есть общая функция translate3d.

Matrix3d

Деформация элемента в трехмерном пространстве с помощью матрицы 4х4. Как писал выше сложность применения затрудняет ее использование в ручном режиме.

ScaleZ

Масштабирование по оси Z. Но эффект будет заметен только при использовании перспективы, поворота элемента по осям X или Y, и при смещении по оси Z.

Также есть общая функция scale3d.

Rotate3d.

Определяет вращение в трехмерном пространстве.

Что она делает проще показать на примере. На демонстрации размещено 4 блока с текстом, соответствующим применяемой к элементу функцией. Угол везде использован 50deg.

К первому синему элементу не применяется никакой трансформации. Ко второму элементу применена rotateX, к третьему – rotateX, к четвертому – rotateZ.

See the Pen
rotate x by Андрей (@adlibi)
on CodePen.

Perspective

Создает ощущение перспективы у объекта. В качестве параметра нужно указать расстояние от плоскости монитора до точки сходимости линий. Задавать нужно только положительное значение. Чем больше значение, тем менее выраженной будет перспектива и наоборот. Эффект заметен при одновременном применении функции rotate.

See the Pen
perspective by Андрей (@adlibi)
on CodePen.