Как использовать матричное преобразование и другие свойства CSS преобразования?

Ответ 1

Указанное выше свойство преобразования относится к категории свойств CSS Transforms. Наряду с упомянутым выше методом matrix() существует несколько других методов, которые сопровождают преобразование:

translate(), rotate(), scale() и skew()

Чтобы понять метод matrix(), лучше всего понять остальные четыре типа.

TRANSFORMS:

Эти четыре метода преобразования в точности соответствуют звуку.

ПЕРЕВЕСТИ:

Посмотрите пример перевода здесь.

translate(e, f) принимает два аргумента. Первым аргументом является x-позиция элемента, а вторая - y-позиция - как по отношению к ее исходной позиции. Если вы хотите переместить элемент 50px вправо и 100px вниз, CSS будет выглядеть как transform: translate(50px, 100px);. Положительный X - правый, положительный Y - вниз; отрицательные числа перемещают элемент в противоположном направлении.

ПОВОРОТ:

Посмотрите пример поворота здесь.

rotate(c) принимает один аргумент, который представляет собой количество вращения, которое вы хотели бы получить у элемента. Положительное вращение по часовой стрелке, отрицательное - против часовой стрелки. Поворот элемента на 30 градусов по часовой стрелке (положительный) будет выглядеть как transform: rotate(30deg);. Обратите внимание, что на этот раз аргумент находится в deg, а не px.

ВЕСЫ:

Посмотрите пример масштаба здесь.

scale(a, d) принимает два аргумента. Первым аргументом является величина масштабирования в направлении X, тогда как второй аргумент - это величина масштабирования в направлении Y. Масштабирование работает, умножая текущее значение (ширина, высота) на значение шкалы. Масштабирование элемента в 2 раза по оси X и 4 раза в направлении Y будет выглядеть как transform: scale(2, 4);. Аргументами могут быть любые значения, включая десятичные и даже отрицательные. Отрицательные значения влияют на перемещение элемента вокруг соответствующей оси.

SKEW:

Просмотрите пример перекоса здесь.

skew(b, c) является потенциально наиболее запутанным преобразованием для объяснения. skew(c, d) принимает два аргумента. Первый аргумент соответствует горизонтальным поверхностям (сверху и снизу), а второй аргумент соответствует вертикальным поверхностям (слева и справа). Оба аргумента находятся в deg, как и у rotate(). Положительные значения для первого аргумента будут вращать вертикальные поверхности против часовой стрелки относительно их центральных точек. Отрицательные значения будут вращать вертикальные поверхности по часовой стрелке вокруг их центральных точек. Положительные значения для второго аргумента поворачивают горизонтальные поверхности по часовой стрелке вокруг их центральных точек, а отрицательные значения поворачивают горизонтальные поверхности против часовой стрелки. Предел (в градусах) для каждого аргумента составляет + -90deg - как показано в следующем примере.

MATRIX:

Посмотрите пример матрицы здесь.

matrix(a, b, c, d, e, f) делает все, что делает ранее указанное преобразование.

Два аргумента a и d предназначены для масштабирования элемента в направлении X и Y-направлении соответственно. Точно так же, как и метод scale(a, d).

Второй и третий аргументы b и c предназначены для искажения элемента. Эти два значения работают идентично методу skew(b, c).

Наконец, последние два аргумента e и f предназначены для перевода элемента в направлении X и в направлении Y соответственно. Точно так же, как метод translate(e, f).

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

Наконец, существуют разные синтаксисы для разных браузеров. Согласно w3schools здесь, они следующие

transform:
-ms-transform: /* IE 9 */
-webkit-transform: /* Safari and Chrome */

Лучшей практикой является тестирование их в разных браузерах перед запуском вашего сайта.

Для получения дополнительной информации о различных 2D преобразованиях, эта ссылка, Для математики позади метода matrix(), эта ссылка.

Ответ 2

Вместо того, чтобы тратить время на то, чтобы обернуть голову вокруг матриц, когда у вас нет математического фона, я рекомендую понимать другие трансформации и знать, как их объединить в одну строку, поскольку, если вы попытаетесь разбить их, то только последняя директива казнены.

Вместо этого

#shape {
    transform: rotate(40deg);
    transform: translate(100px, 30px);
    transform: scale(0.8, 0.4);
}

Сделайте это вместо:

#shape {
    transform: rotate(40deg) translate(100px, 30px) scale(0.8, 0.4)
}

И это даст вам желаемый результат, который вы можете обернуть вокруг себя и иметь такую ​​же мощность, как и матрица.