Для трансформации блоков используется параметр transform.
transform: функция_трансформации(значение);Если нужно произвести несколько преобразований сразу, то они записываются через пробел.
Важна учитывать, что функция rotate поворачивает не фигуру, а ось координат, поэтому, например, перемещение по оси X после поворота на 42° будет происходить не влево-вправо, а по диагонали.
Все преобразования происходят относительно центральной точки. Ее положение можно изменить с помощью свойства transform-origin. Оно принимает значения в пикселях, в процентах или слова left, right, top, bottom или center.
transform-origin: x y z;Функции перемещения
Ось X направлена вправо, Y — вниз.
Значения можно задавать как в пикселях, так и в % (от размеров блока).
translate(X, Y);
translate3d(X, Y, Z);
translateX(X);
translateY(Y);
translateZ(Z)Функции масштабирования
Значения в функцию передаются без единиц измерения.
Функция scale может принимать 1 или 2 параметра. Пре вводе 1 параметра, блок будет отмасштабирован по всем осям, при задании 2 параметров можно указать пропорции отдельно для ширины (ось X) и высоты (ось Y) блока.
Также можно задавать отрицательные значения. В этом случае элемент будет отзеркален относительно той оси, для которой указали отрицательное значение, и отмасштабирован.
scale(value);
scale(mX, mY);
scale3d(mX, mY, mZ);
scaleX(mX);
scaleY(mY);
scaleZ(mZ)Функция поворота
В функцию нужно указывать угол поворота в градусах (deg), радианах (rad), количествах оборотов (turn) или градианах (100grad = 90°) . Если угол положительный, вращение происходит по часовой стрелке, отрицательный — против часовой.
Функции rotateX, rotateY и rotateZ поворачивают блок в трех мерном пространстве. Простому rotate соответствует rotateZ.
Для поворота в 3D пространстве используется функция rotate3d, где задается вектор, который определяет ось вращения, и, собственно, угол поворота.
rotate(value);
rotate3d(rX, rY, rZ, value);
rotateX(rX);
rotateY(rY);
rotateZ(rZ);
Функции наклона
В качестве значения в функцию передаются градусы от 0 (без трансформации) до 90 (блок становится линией).
Трансформация происходит по двум осям. Принцип действия примерно такой:
При наклоне по оси X центральная горизонтальная линия, нижняя граница блока смещается вправо (положительное значение) или влево (отрицательное), а верхняя в противоположную сторону так, чтобы получился заданный угол.
По оси Y происходит аналогичная трансформация: при положительных значениях левая граница поднимается, а правая опускается.
skew(X, Y);
skewX(X);
skewY(Y);Дополнительные свойства для 3D пространства
Все основные функции имеют свои аналоги для 3D преобразований (добавляется суффикс 3d). Исключение составляют функции
perspective() — Определяет расстояние от плоскости экрана до точки сходимости линий и тем самым задаёт, насколько выражен эффект перспективы. Значение none = бесконечности. Точка сходимости по умолчанию располагается в центре элемента и может быть изменена с помощью свойства perspective-origin ().
perspective-origin(X, Y) — определяет позицию точки сходимости. Принимает значения в процентах и ключевые слова left, right, top, bottom или center.
transform-style — определяет, как дочерние элементы должны отображаться в 3D-пространстве. значение flat — дочерние элементы лежат в той же плоскости, что и их родитель; preserve-3 — дочерние элементы будут отображаться в 3D-пространстве. Это свойство должно использоваться совместно с transform.
backface-visibility — Определяет, показывать обратную сторону элемента или нет. Может быть visible и hidden.