Дополнительная информация по видео "CSS TRANSFORM ЗА 4 мин"
matrix и matrix3d
matrix
В видео я только вкратце заикнулся о функциях matrix и matrix3d. Давайте подробнее о них поговорим.
transform: matrix(a, b, c, d, tx, ty);
a и d представляют горизонтальное и вертикальное масштабирование.
b и c представляют компоненты перекоса или поворота.
tx и ty представляют горизонтальное и вертикальное перемещение.
Пример:
transform: matrix(1, 0.5, -0.5, 1, 50, 50);
a равно 1, что указывает на отсутствие горизонтального масштабирования.
b равно 0,5, что указывает на перекос вдоль оси X.
c равно -0,5, что указывает на перекос вдоль оси Y.
d равно 1, что указывает на отсутствие вертикального масштабирования.
tx равно 50, что указывает на перемещение по горизонтали на 50 пикселей.
ty равно 50, что указывает на перемещение по вертикали на 50 пикселей.
matrix3d
transform: matrix3d(a1, b1, c1, d1,
a2, b2, c2, d2,
a3, b3, c3, d3,
a4, b4, c4, d4);
a1 -a4, b1-b4, c1-c4: элементы матрицы преобразования.
d1-d4: Элементы, управляющие искажением перспективы.
transform: matrix3d(1, 0, 0, 0,