Css transform matrix: matrix() — CSS: Cascading Style Sheets

Генератор CSS — матричное преобразование

Генератор CSS — матричное преобразование

       

сохранить | reset

Border

Border Width px

Border Style soliddotteddasheddoublehiddenridgeinsetoutset

Border Color

 

Individual

Border Radius

All Radius px

 

Top Left px

Top Right px

Bottom Right px

Нижний левый пикс.

Box Shadow

Shadow Type Outsetinset

XY Position

Shadow Fade

Shadow Spread

CHAVE Color

Добавить больше [+]

Фон

Цвет фона

Фоновое изображение

Foanly Повторите №

. Repeatrepeat-xrepeat-yrepeat

Положение фона

ключевое слово  
% (проценты)  
пикселей (пикселей)

по горизонтали — xleftcenterright

Vertical — Y TopCenterBottom

Горизонтальный — x %

Вертикальный — Y %

Горизонтальный — XPX

Вертикальный

Добавить еще [+]

Градиент

Ориентациялинейнаярадиальнаяэллиптическаяповторяющаяся линейнаяповторяющаяся радиальнаяповторяющаяся эллиптическая

Размердальняя сторонадальний угол0003

PX PX

%

градуса

Start Color

Конец Цвет

Добавить стоп [+]

Трансформация

Матрица (A, B, C, D, Y)

A B x B x.
C D Y
0 0 1

Индивидуальное преобразование

Вращение

Перевод XY

Переход

Добавить свойство [+]

Анимация

Play/Stop

.0002 Function lineareaseease-inease-in-outease-outcubic-bezier

speed duration(sec)

start delay

iteration count1 time2 timesinfinite

Image Filter

Greyscale

Saturate

Opacity

Brightness

Contrast

Hue-rotate

Invert

CSS Generator — Matrix Transform

Свойство CSS Transform позволяет масштабировать, вращать, наклонять и перемещать элементы HTML.

1) Масштабирование — изменение размера элементов (маленький или больший)
2) Поворот — на угол вокруг начала координат
3) Наклон — преобразование по оси X или Y
4) Перемещение — перемещение элемента в направлении XY

также линейные преобразования может быть представлен матричной функцией. Он объединяет несколько свойств преобразования в одну матричную функцию. Благодаря этому изображению из Википедии, которое проясняет все о матричном преобразовании.
001101xy(1, 0)(0, 1)(0, 0)Без изменений100100(X,Y)Перевести1001XY(W,0)(0,H)Масштаб относительно начала координатW00H00(cos θ, −sin θ)(sin θ, cos θ)θПовернуть вокруг начала координатcos θ−sin θsin θcos θ00001(1, 0)(tan ϕ, 1)ϕСдвиг в направлении x10tan ϕ100001(1, tan ψ)(0, 1)ψСдвиг в направлении y1tan ψ0100001(−1, 0) (0, −1)Отражение относительно начала координат −100−100(1, 0)(0, −1) Отражение относительно оси X100−100(−1, 0)(0, 1) Отражение относительно оси Y−100100

Матрицы и как их использовать в CSS | Анастасия Кас | Frontend Weekly

Что такое матрицы и как их использовать в 2D-преобразованиях CSS.

Photo by Shapelined on Unsplash

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

Короче говоря, как бы я ни любил узнавать что-то новое, некоторые математические концепции оказались довольно трудными для усвоения, поскольку дизайнеру или разработчику пользовательского интерфейса довольно редко приходится их практиковать. Одним из них для меня были матрицы и преобразования, которые они создают. К моему приятному удивлению, однако, работая с трансформациями CSS, среди обычных масштабирования и перекоса я заметил matrix и matrix3d. Эта статья о преобразованиях, которые вы можете создать с помощью матрицы, и о том, как они работают.

Если у вас есть солидная математическая подготовка, вы будете знать, что такое матрицы и их применение в графических преобразованиях. Матрицы представляют собой строки и столбцы чисел (или символов), что позволяет выполнять сложные вычисления за меньшее количество шагов.

Измерения матрицы

Измерения определяются количеством строк и столбцов, содержащихся в матрице, которые записываются как #rows by #columns.

Все отлично, но как именно они работают для преобразования точек и объектов? Это связано с вычислениями, вы можете умножать матрицы с другими типами чисел, но только до тех пор, пока количество строк совпадает с числом столбцов в матрице. Таким образом, вы можете умножать матрицу 3×3 на любые данные, имеющие 3 строки. Наиболее распространенным типом данных в этом случае является вектор или точка на плоскости XY. Умножение вашей точки или вектора на матрицу приведет к новой преобразованной точке или вектору.

Чтобы умножить матрицы, мы умножаем каждую n-ю запись в строке на соответствующее n-е число в столбце, а затем складываем все результаты вместе, чтобы получить новую запись матрицы.

Умножение матриц

Видя, что при преобразованиях мы хотим, чтобы на выходе было то же количество элементов, что и во входном векторе или точке, нам нужно использовать матрицы 3×3 и точки 3×1. Чтобы сделать это, используя только 2D-преобразования, нам нужно использовать третье значение заполнителя для z-плоскости, которое не влияет на остальную часть преобразования. Для вектора мы просто добавляем третье значение 1, а для матрицы мы добавляем еще одну строку и столбец из единичной матрицы 3×3. Единичная матрица — это просто матрица с равным количеством строк и столбцов, умноженная на матрицу с теми же пропорциями, не меняет эту матрицу.

Использование однородных координат для двумерных преобразований

Теперь, когда мы знаем, как применить матрицу к некоторой точке или вектору, чтобы преобразовать их, давайте посмотрим, какие значения нам нужно использовать в 4 заданных слотах цифр, мы можем использовать их для расширение , вращение, отражение и наклон .

Преобразования 2D-матрицы

Как вы можете догадаться, как только вы запомните соответствующие слоты, вы можете настроить свои значения по мере необходимости.

Очевидно, CSS не может поддерживать несколько строк и столбцов для ваших значений, поэтому нам нужно переписать наши матрицы, чтобы они уместились в одну строку:

Матрицы в CSS

Обычно мы используем только верхние 6 цифр, идя сверху вниз по столбцу за столбцом. Таким образом, отражение по оси x будет записано как преобразование

: matrix(1,0,0,-1,0,0) , а поворот против часовой стрелки на угол 90 градусов будет записан как преобразование : матрица(0,-1,1,0,0,0) .

Последние 2 цифры, e и f, соответственно, представляют собой простые перемещения по пикселям между осями x и y, если вы хотите переместить объект на 100 пикселей вправо, вы можете использовать matrix(1,0,0,1,100,0) и если вы хотите переместить его на 100px вниз, как вы уже догадались, вам нужно использовать матрицу (1,0,0,1,0,-100) .

Однако следует иметь в виду, что объект, к которому вы применяете преобразование , является плоскостью , а не просто точкой, поэтому весь объект будет перевернут или перемещен.

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

Хотя, возможно, его труднее запомнить, чем такие свойства, как rotate или skew , использование матриц в CSS может дать вам возможность использовать одно преобразование для более сложных анимаций вместо применения нескольких.