2D-трансформации CSS

2D-трансформации CSS

CSS-трансформации (transforms) позволяют перемещать, вращать, масштабировать и наклонять элементы.

Наведите мышь на следующий элемент, чтобы увидеть 2D-трансформации:

2D rotate

В этой главе вы узнаете о следующих CSS-свойствах:

  • transform

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая поддерживает этот свойство полностью.

Атрибут Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

Методы 2D преобразований CSS

Используя CSS transform Свойства, с помощью которых можно использовать следующие методы 2D-трансформации:

  • translate()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

Совет:Вы узнаете о 3D-трансформациях в следующей главе.

Метод translate()

Translate

translate() Метод перемещает элемент от его текущего положения (в зависимости от предоставленных параметров по осям X и Y).

В следующем примере элемент <div> перемещается вправо на 50 пикселей и вниз на 100 пикселей от его текущего положения:

Пример

div {
  transform: translate(50px, 100px);
}

Попробуйте сами

Метод rotate()

Rotate

rotate() Метод вращает элемент по часовой стрелке или против часовой стрелки в зависимости от предоставленного угла.

В следующем примере элемент <div> вращается по часовой стрелке на 20 градусов:

Пример

div {
  transform: rotate(20deg);
}

Попробуйте сами

Использование отрицательного значения для вращения элемента против часовой стрелки.

В следующем примере элемент <div> вращается против часовой стрелки на 20 градусов:

Пример

div {
  transform: rotate(-20deg);
}

Попробуйте сами

Метод scale()

Scale

scale() Метод увеличения или уменьшения размера элемента (в зависимости от предоставленных параметров ширины и высоты).

В следующем примере элемент <div> увеличивается до двух его исходных размеров по ширине и до трех его исходных размеров по высоте:

Пример

div {
  transform: scale(2, 3);
}

Попробуйте сами

В следующем примере элемент <div> уменьшается до половины его исходной ширины и высоты:

Пример

div {
  transform: scale(0.5, 0.5);
}

Попробуйте сами

Метод scaleX()

scaleX() Метод увеличения или уменьшения ширины элемента.

В следующем примере элемент <div> увеличивается до двух его исходных размеров по ширине:

Пример

div {
  transform: scaleX(2);
}

Попробуйте сами

Данный пример уменьшает элемент <div> до половины его исходной ширины:

Пример

div {
  transform: scaleX(0.5);
}

Попробуйте сами

Метод scaleY()

scaleY() Метод увеличивает или уменьшает высоту элемента.

Следующий пример увеличивает элемент <div> до трижды его исходной высоты:

Пример

div {
  transform: scaleY(3);
}

Попробуйте сами

Следующий пример уменьшает элемент <div> до половины его исходной высоты:

Пример

div {
  transform: scaleY(0.5);
}

Попробуйте сами

Метод skewX()

skewX() Метод наклоняет элемент по оси X на заданный угол.

Следующий пример наклоняет элемент <div> на 20 градусов по оси X:

Пример

div {
  transform: skewX(20deg);
}

Попробуйте сами

Метод skewY()

skewY() Метод наклоняет элемент по оси Y на заданный угол.

Следующий пример наклоняет элемент <div> на 20 градусов по оси Y:

Пример

div {
  transform: skewY(20deg);
}

Попробуйте сами

Метод skew()

skew() Метод наклоняет элемент по осям X и Y на заданный угол.

Следующий пример наклоняет элемент <div> на 20 градусов по оси X и на 10 градусов по оси Y:

Пример

div {
  transform: skew(20deg, 10deg);
}

Попробуйте сами

Если второй параметр не указан, его значение равно нулю. Поэтому следующий пример наклоняет элемент <div> на 20 градусов по оси X:

Пример

div {
  transform: skew(20deg);
}

Попробуйте сами

Метод matrix()

Rotate

matrix() Метод комбинирует все методы 2D преобразований в один.

matrix() Метод принимает шесть параметров, включая математические функции, которые позволяют вам вращать, масштабировать, перемещать (перемещать) и наклонять элемент.

Параметры такие: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Пример

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

Попробуйте сами

Атрибуты преобразований CSS

В таблице ниже перечислены все атрибуты 2D преобразований:

Атрибут Описание
transform Применение 2D или 3D преобразований к элементу.
transform-origin Позволяет изменить положение элемента, подлежащего преобразованию.

Методы 2D преобразований CSS

Функция Описание
matrix(n,n,n,n,n,n) Определение 2D преобразования, использование матрицы из шести значений.
translate(x,y) Определение 2D преобразования, перемещение элемента по осям X и Y.
translateX(n) Определение 2D преобразования, перемещение элемента по оси X.
translateY(n) Определение 2D преобразования, перемещение элемента по оси Y.
scale(x,y) Определение 2D масштабирования преобразования, изменяется ширина и высота элемента.
scaleX(n) Определение 2D масштабирования преобразования, изменяется ширина элемента.
scaleY(n) Определение 2D масштабирования преобразования, изменяется высота элемента.
rotate(angle) Определение 2D вращения, в параметрах указывается угол.
skew(x-angle,y-angle) Определение 2D наклона преобразования по осям X и Y.
skewX(angle) Определение 2D наклона преобразования по оси X.
skewY(angle) Определение 2D наклона преобразования по оси Y.