Как разобрать matrix на scale, rotate, translate, skew?

#javascript #css #css3 #css_animation #transform

Дело такое, getComputedStyle(element).getPropertyValue("transform") возвращает matrix(a,
c, b, d, tx, ty). C translate всё вроде бы просто: translateX = tx, translateY = ty.
А вот как вытащить scale, rotate, skew я немного не понимаю потому как во первых в
rotate и scale должны быть градусы, во вторых:
вроде как skewX = b, skewY = c, а scaleX = a, scaleY = d, но при этом что бы повернуть
элемент в матрице a = cos(x), b = sin(x), c = -sin(x), d cos(x).
Вообщем из набора параметров matrix я бы ещё составил а вот из matrix вытащить параметры
вообще не понимаю как. Подскажите пожалуйста как перевести матрицу в понятный простому
человеку язык или подскажите как можно получить свойство transform не в matrix, а в
scale, rotate, translate, skew?
    

Ответы

Ответ 1

В черновике спецификации описано какие значения, что означают.

Трансформации осуществляются с помощью матрицы трансформаций, в общем случае (3D)
матрица 4х4



Матрица, которую вы получаете matrix(a, c, b, d, tx, ty) представляется в следующем виде:



Как вы правильно отметили:  tx, ty - отвечают за перемещение.

За масштабирование отвечают значения лежащий на главной диагонали, в нашем случае
это a,d, при это a - масштабирование по ширине, d - по высоте.

c,b - отвечают за наклон

и все вместе a,b,c,d - за поворот.

Подробнее можно увидеть на картинке



Такие преобразования называются Афинными, подробнее о них можно узнать:

Wikipedia: Афинные преобразования
Аффинное преобразование и его матричное представление