С помощью 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) Определяет двумерное преобразование в форме матрицы преобразования, состоящей из шести значений.

См. Руководство по 3D transform-функциям в CSS3 чтобы узнать больше о 3D преобразованиях.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.