Что такое матрицы и как их использовать в CSS 2D преобразованиях.
Как матрицы используются для преобразований?
Это все замечательно, но как именно они работают для преобразования точек и объектов? Это связано с вычислениями, вы можете умножать матрицы на другие типы чисел, но только до тех пор, пока количество строк совпадает с числом столбцов в матрице. Таким образом, вы можете умножить матрицу 3х3 на любые данные, имеющие 3 строки. В этом случае наиболее распространенным типом данных является вектор или точка на плоскости XY. Умножение вашей точки или вектора на матрицу приведет к новой, преобразованной точке или вектору.
Чтобы умножить матрицы, мы умножаем каждую n-ую запись в строке на соответствующее n-е число в столбце, а затем складываем все результаты вместе, чтобы получить новую запись в матрице.
Видя, что в преобразованиях мы хотим, чтобы выходные данные имели то же количество элементов, что и введенный вектор или точку, нам нужно использовать матрицы 3x3 и точки 3x1. Чтобы сделать это, используя только двумерные преобразования, нам нужно использовать третье значение заполнителя для z-плоскости, которое не влияет на остальную часть преобразования. Для вектора мы просто добавляем третье значение 1, а для матрицы добавляем еще одну строку и столбец из единичной матрицы 3x3. Тождественная матрица - это просто матрица с равным количеством строк и столбцов, умноженная на матрицу с одинаковыми пропорциями, не изменяющую эту матрицу.
Теперь, когда мы знаем, как применить матрицу к некоторой точке или вектору, чтобы преобразовать ее, давайте посмотрим, какие значения нам нужно использовать в 4 заданных цифровых слотах, мы можем использовать их для расширения, поворота, отражения и перекоса,
Как вы можете догадаться, как только вы запомните соответствующие слоты, вы можете отрегулировать свои значения по мере необходимости.
Написание 2D матриц в CSS.
Очевидно, что CSS не может поддерживать несколько строк и столбцов для ваших значений, поэтому нам нужно переписать наши матрицы, чтобы они уместились в одну строку:
В основном мы используем только верхние 6 цифр, идущие сверху вниз от столбца к столбцу. Таким образом, отражение на оси x будет записано как transform: matrix(1,0,0,-1,0,0), а вращение против часовой стрелки на угол 90 градусов будет записано как transform: matrix(0,-1,1,0,0,0).
Последние 2 цифры, e и f, соответственно, являются простыми переводами по пикселям между осями x и y. Если вы хотите переместить свой объект на 100 пикселей вправо, вы можете использовать его, matrix(1,0,0,1,100,0)а если вы хотите переместить его на 100 пикселей вниз, то вы возможно, догадались, что вам нужно использовать matrix(1,0,0,1,0,-100).
Однако следует иметь в виду, что объект, к которому вы применяете преобразование, является плоскостью, а не просто точкой, поэтому весь объект будет перевернут или переведен.
Хотя, возможно, сложнее запомнить, чем такие свойства, как rotate или skew, использование матриц в CSS может предоставить вам возможность использовать одно единственное преобразование для более сложных анимаций вместо применения нескольких. Матрицы также являются основой всех графических преобразований, поэтому запоминание того, как они работают в CSS, может помочь вам лучше понять, как работают другие типы компьютерной графики.
Если работа в 2D кажется простой, вы также можете попробовать поэкспериментировать со matrix3d свойством, которое добавляет совершенно другое измерение, но работает очень похожим образом.
Мой кошелёк яндекс-деньги для желающих мотивировать меня работать над каналом.