Руководство по 2D transform-функциям в CSS3

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

Преобразованный элемент не влияет на окружающие элементы, но может перекрывать их, подобно абсолютно позиционированным элементам. Однако преобразованный элемент по-прежнему занимает место в макете в его расположении по умолчанию (не преобразованном).

Использование CSS3 Transform

CSS3-свойство transform использует функции преобразования для управления системой координат, используемой элементом, чтобы применить эффект преобразования.

Рассмотрим эти функции преобразования:

Функция translate()

Перемещает элемент из его текущего положения в новое положение по осям X и Y. Это можно записать как translate(tx, ty). Если ty не указан, предполагается, что его значение равно нулю.

img {
    -webkit-transform: translate(200px, 50px);  /* Chrome, Safari, Opera */
       -moz-transform: translate(200px, 50px);  /* Firefox */
        -ms-transform: translate(200px, 50px);  /* IE 9 */
            transform: translate(200px, 50px);  /* Standard syntax */    
}

Функция translate(200px, 50px) перемещает изображение на 200 пикселей по горизонтали вдоль положительной оси X и на 50 пикселей по положительной оси Y.

Функция rotate()

Функция rotate() поворачивает элемент вокруг его источника (как указано в свойстве transform-origin) на указанный угол. Это можно записать как rotate(a).

img {
    -webkit-transform: rotate(30deg);  /* Chrome, Safari, Opera */
       -moz-transform: rotate(30deg);  /* Firefox */
        -ms-transform: rotate(30deg);  /* IE 9 */
            transform: rotate(30deg);  /* Standard syntax */    
}

Функция поворота rotate(30deg) поворачивает изображение по часовой стрелке относительно его начала на угол 30 градусов. Вы можете использовать отрицательные значения, чтобы повернуть элемент против часовой стрелки.

Функция scale()

Функция scale() увеличивает или уменьшает размер элемента. Это может быть записано как scale(sx, sy). Если sy не указан, предполагается, что он равен sx.

img {
    -webkit-transform: scale(1.5);  /* Chrome, Safari, Opera */
       -moz-transform: scale(1.5);  /* Firefox */
        -ms-transform: scale(1.5);  /* IE 9 */
            transform: scale(1.5);  /* Modern Browsers */    
}

Функция scale(1.5) пропорционально масштабирует ширину и высоту изображения в 1.5 раза к его первоначальному размеру. Функция scale(1) или scale(1, 1) не влияет на элемент.

Функция skew()

Функция skew() наклоняет элемент по осям X и Y на указанные углы. Это может быть записано как skew(ax, ay). Если ay не указан, предполагается, что его значение равно нулю.

img {
    -webkit-transform: skew(-40deg, 15deg);  /* Chrome, Safari, Opera */
       -moz-transform: skew(-40deg, 15deg);  /* Firefox */
        -ms-transform: skew(-40deg, 15deg);  /* IE 9 */
            transform: skew(-40deg, 15deg);  /* Modern Browsers */    
}

Функция skew(-40deg, 15deg) наклоняет элемент на -40 градусов по горизонтали вдоль оси X и 15 градусов по вертикали вдоль оси Y.

Функция matrix()

Функция matrix() может одновременно выполнять все двумерные преобразования, такие как translate(), rotate(), scale(), и skew(). Она принимает шесть параметров в виде матрицы, которую можно записать в виде matrix(a, b, c, d, e, f).

translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty); — где tx и ty — значения горизонтального и вертикального перевода.
rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0); — где а это значение в градусах. Вы можете поменять местами значения sin(a) и -sin(a), чтобы изменить направление вращения. Максимальный угол поворота 360 градусов.
scale(sx, sy) = matrix(sx, 0, 0, sy, 0 ,0); — где sx и sy — значения горизонтального и вертикального масштабирования.
skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0 ,0); — где ax и ay — горизонтальные и вертикальные значения в градусах.

Вот пример выполнения 2D-преобразования с использованием функции matrix().

img {
    -webkit-transform: matrix(0, -1, 1, 0, 200px, 50px);  /* Chrome, Safari, Opera */
       -moz-transform: matrix(0, -1, 1, 0, 200px, 50px);  /* Firefox */
        -ms-transform: matrix(0, -1, 1, 0, 200px, 50px);  /* IE 9 */
            transform: matrix(0, -1, 1, 0, 200px, 50px);  /* Standard syntax */
}

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

img {
    -webkit-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* Chrome, Safari, Opera */
       -moz-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* Firefox */
        -ms-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* IE 9 */
            transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* Standard syntax */    
}

2D Transform функции

В следующей таблице приведен краткий обзор всех функций 2D-преобразования.

Значение	Описание
`translate(tx,ty)`	Перемещает элемент на заданную величину вдоль оси X и Y.
`translateX(tx)`	Перемещает элемент на заданную величину вдоль оси X.
`translateY(ty)`	Перемещает элемент на заданную величину вдоль оси Y.
`rotate(a)`	Поворачивает элемент на указанный угол вокруг источника элемента, определеного свойством `transform-origin`.
`rotateX(a)`	Поворот элемента на заданный угол вокруг оси X.
`rotateY(a)`	Поворот элемента на заданный угол вокруг оси Y.
`scale(sx,sy)`	Масштабирует элемент на заданную величину по осям X, Y. Функция `scale (1,1)` не имеет эффекта.
`scaleX(sx)`	Масштабирует элемент вдоль оси X.
`scaleY(sy)`	Масштабирует элемент вдоль оси Y.
`skew(ax,ay)`	Наклоняет элемент на заданный угол по оси X и Y.
`skewX(ax)`	Наклоняет элемент на заданный угол вдоль оси X.
`skewY(ay)`	Наклоняет элемент на заданный угол вдоль оси Y.
`matrix(n,n,n,n,n,n)`	Определяет двумерное преобразование в форме матрицы преобразования, состоящей из шести значений.