Дело такое, 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?
Ответ
В черновике спецификации описано какие значения, что означают.
Трансформации осуществляются с помощью матрицы трансформаций, в общем случае (3D) матрица 4х4
Матрица, которую вы получаете matrix(a, c, b, d, tx, ty) представляется в следующем виде:
Как вы правильно отметили: tx, ty - отвечают за перемещение.
За масштабирование отвечают значения лежащий на главной диагонали, в нашем случае это a,d, при это a - масштабирование по ширине, d - по высоте.
c,b - отвечают за наклон
и все вместе a,b,c,d - за поворот.
Подробнее можно увидеть на картинке
Такие преобразования называются Афинными, подробнее о них можно узнать:
Wikipedia: Афинные преобразования
Аффинное преобразование и его матричное представление
Комментариев нет:
Отправить комментарий