как из matrix получить deg?

Question

У элемента в CSS свойствах установлено transform: skewX(-5deg);, а при получении этого свойства в JS $(element).css('transform') я получаю transform: matrix(1, 0, -0.0874887, 1, 0, 0). Есть ли какой-то способ, чтоб получить эти самые -5deg вместо матрицы?

Answer 1

Нашел статью где описывали функцию получение rotate() в deg и чуток переделал ее для получения значений skew().

var el = document.getElementById("block");
var st = window.getComputedStyle(el, null);
var tr = st.getPropertyValue("-webkit-transform") ||
   st.getPropertyValue("-moz-transform") ||
   st.getPropertyValue("-ms-transform") ||
   st.getPropertyValue("-o-transform") ||
   st.getPropertyValue("transform") ||
   "FAIL";
console.log('Matrix: ' + tr);
var values = tr.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];
var scale = Math.sqrt(aa + bb);
var skewX = Math.round(Math.atan(c) * (180/Math.PI));
console.log('skewX: ' + skewX + 'deg');
var skewY = Math.round(Math.asin(b / scale) * (180/Math.PI));
console.log('skewY: ' + skewY + 'deg');

<div id="block" style="transform: skew(10deg, 5deg)"></div>

Результат работы:

INPUT: transform: skew(50deg).
OUTPUT: SkewX: 50deg.

INPUT: transform: skew(50deg, 10deg).
OUTPUT: SkewX: 50deg, SkewY: 10deg.