Свойство CSS 3 transform

Приветствую, уважаемые товарищи.

Сегодня анализу подвергнется ещё одно свойство из CSS 3 — transform — то-бишь транформирование, или преобразование, если угодно. С его помощью можно изменять масштаб контейнера, наклонять и даже вращать элементы. Только, в противовес какому-нибудь width:50%, манипуляция производится над всем элементом, включая его содержимое.

Здорово, правда?

Вся суть преобразований сводится к «матричному колдунству». Вырожденная матрица 3×3 имеет вид:

 a  c  e 
 b  d  f 
 0  0  1 

Где a и d отвечают за горизонтальное и вертикальное масштабирование, b и c — наклоны по осям, e и f — смещения. Это базовая матрица, все преобразования обсчитываются на её основе.

Если интересно, почему именно так, смотрите информацию на офсайте.

Для использования CSS свойста пишем что-то вроде:

transform: функция1 [функция2 ...];

Функции рассмотрим чуть ниже, прежде же необходимо знать про ещё одно свойство:

transform-origin: x y

Где x и y — координаты точки (отсчитывается от левого верхнего угла элемента), относительно которой производятся преобразования. В качестве значений подходят единицы измерения CSS: px, em и т. д. Можно использовать проценты. Имеются ключевые слова: left, center, right для x (расположить точку слева, по центру или справа); top, center, bottom для y (вверху, по центру или внизу). Позиция по умолчанию:

transform-origin: 50% 50%

Это означает, что все преобразования будут происходить относительно центра элемента.

На самом деле, общий код функции содержит ещё одну, третью, переменную — z. Это может натолкнуть на мысль, что трансформации применимы к трём измерениям. Мысль верна. Применив функцию perspective для свойства transform, можно задать расстояние между «глазами» пользователя и элементом. Более подробно о 3D поговорим, скорее всего, в одной из следующих статей.

Переходим к самому интересному. Как и в случае transition, здесь используется одна универсальная функция, на основе которой базируются остальные.

matrix

Функция представлена в виде matrix(a, b, c, d, e, f). Что обозначает каждое значение написано чуть выше. Чтобы было понятно, общий код:

transform: matrix(2, 0, 0, 1, 0, 0);

Элемент, к которому применяется трансформация, будет в 2 раза шире исходного размера.

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

Теперь посмотрим, какие из функций предопределены.

rotate

Вращение элемента. В качестве значения задаётся угол поворота. Поддерживаются следующие угловые размеры:

• deg — обычные градусы, полный оборот окружности составляется 360°;
• rad — радианы, полный оборот окружности составляет 2π;
• grad — грады, 1 град = 1/400 окружности, таким образом, 400 град составляют полный оборот окружности;
• turn — оборот, т. е. 1turn = 360°.

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

 cos(α)  -sin(α)  0 
 sin(α)   cos(α)  0 
   0       0      1 

transform: matrix(cos(α), sin(α), -sin(α), cos(α), 0, 0);

Удивлены? Представьте, что нужно повернуть элемент на 90°. Косинус этого угла равен нулю, синус — единице. Устанавливаем на форме значения масштабов в ноль, горизонтальный наклон — -1, вертикальный — 1. Получилось? ;-)

В коде это выглядит так:

transform: matrix(0, 1, -1, 0, 0, 0);

либо так:

transform: rotate(90deg);

Второй вариант понятнее, но и первый знать просто полезно.

scale

Масштабирование. Значение по умолчанию — 1, т. е. оригинальный масштаб. Числа больше единицы приводит к увеличению элемента, меньше единицы — к уменьшению. Отрицательные значение работают аналогично, только зеркально «отражают» элемент. Запись функции: scale(scX, scY). Где scX и scY — численные значения. Характерная особенность — при задании одного параметра масштабирование распределяется по горизонтали и вертикали.

Определены функции изменения масштаба по осям:

• scaleX(scX) — масштабирование по ширине (ось X), аналогично scale(scX, 1);
• scaleY(scY) — наклон по высоте (ось Y), аналогично scale(1, scaleY).

Масштабирование выполняется пропорционально, например, значение 2 ровно в 2 раза увеличит элемент, а 0.1 уменьшит в 10 раз.

Представление данной функции можно напрямую перенести в общий вид:

transform: matrix(scX, 0, 0, scY, 0, 0);

skew

Функция наклоняет элемент относительно осей. Общая запись: skew(angleX, angleY). Единицами измерений являются уже озвученные выше угловые величины. Имеются функция для задания наклонов по осям:

• skewX(angleX) — наклон по оси X, аналогично skew(angleX);
• skewY(angleY) — наклон по оси Y, аналогично skew(0, angleY).

В коде, с использованием matrix имеет вид:

transform: matrix(1, tan(angleX), tan(angleY), 1, 0, 0);

translate

Производит смещение элемента по осям X и Y. В качестве значений необходимо указывать поддерживаемые размерные единицы: px, em и пр. Есть функции для смещения по конкретным осям:

• translateX(valX) — смещение по X, аналогично translate(valX);
• translateY(valY) — смещение по Y, аналогично translate(0, valY).

Как несложно догадаться, вызов имеет вид:

transform: matrix(1, 0, 0, 1, valX, valY);

Положительные значения для X смещают элемент вправо, для Y — вниз. Отрицательные значения, соответственно, влево и вверх.

Прочие свойства и функции

Были рассмотрены лишь 2D эффекты. Но многие браузеры в полной мере поддерживают третье измерение. Можно работать с 3D (рассмотренные выше функции являются, по сути, частным случаем, который имеет место при «выбрасывании» одного измерения). Можно задать поведение внутренник элементов (лежат ли они в одной плоскости с изменяемым, либо представлены в трёх измерениях); за это отвечает свойство transform-style, которое принимает значение flat (по умолчанию), либо preserve-3d (отображение вложенных элементов в 3D).

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

CSS 3 сделал огромный шаг вперёд. С одной стороны, это позволяет избавиться от всяких хаков и воплощать действительно сложные дизайны. С другой — довольно сильно усложнились стили, что делает полноценное использование, в большинстве случаев, недоступным для прозрачного использования большинством пользователей.