Рекомендации по курсу:

Функция CSS matrix()

Определение и использование в CSS matrix() Функция определяет двумерное преобразование через матрицу, содержащую шесть значений.

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

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

Пример

Пример 1

Использование matrix() Определение двумерных преобразований для нескольких элементов <div>:

#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#myDiv3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

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

Пример 2

Использование matrix() Создание двумерных преобразований для изображений:

#img1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#img2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#img3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

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

Грамматика CSS

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Технические детали

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

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

Связанные страницы

Справка:Свойство transform в CSS

Справка:Функция matrix3d() в CSS

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