как из matrix получить deg? [дубликат]

96
06 февраля 2022, 10:50
На этот вопрос уже дан ответ здесь:
Как разобрать matrix на scale, rotate, translate, skew? (1 ответ)
Закрыт 2 года назад.

У элемента в 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(a*a + b*b); 
 
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.
READ ALSO
Поиск по таблице Google Script
javascript

Поиск по таблице Google Script

Доброго времени суток

 202
Отфильтровать по категориям в express + mondodb
javascript

Отфильтровать по категориям в express + mondodb

reqbody

 108
Инициализация нескольких swiper slider
javascript

Инициализация нескольких swiper slider

на странице есть четыре слайдера, инициализирую как два разных slider1 и slider2Слайдеры под классом slider1 и slider2 по два слайдера в каждом классе,...

 183
Найти объект с помощью перебора массива
javascript

Найти объект с помощью перебора массива

Есть select нужно с помощью перебора массива вывести ключ(red,blue,green) к которому относится значение select, то-есть если мы выбираем в select "Академгородок"...

 98