JSFiddle - React, Tailwind, and code Playground
CSS
div {background:red; width:100px; height:100px;}
JavaScript
$('div').on('click',function(){
var div = $(this);
var degree = getDegreeElementById($(this).attr('id')) + 50;
$(this).css('transform', 'rotate3d(2, 1, 0, ' + degree + 'deg)');
});
function getDegreeElementById(element_id){
var element = document.getElementById(element_id);
var style = window.getComputedStyle(element, null);
// получаем значение стилей
var valueStyle = style.getPropertyValue("-webkit-transform") ||
style.getPropertyValue("-moz-transform") ||
style.getPropertyValue("-ms-transform") ||
style.getPropertyValue("-o-transform") ||
style.getPropertyValue("transform");
// если стилей нет, то угол 0 градусов
if(valueStyle == 'none') return 0;
// разбираем полученное значение
var values = valueStyle.split('(')[1];
values = values.split(')')[0];
values = values.split(',');
// получаем синус и косинус
var cos = values[0];
var sin = values[1];
// вычисляем угол
var degree = Math.round(Math.asin(sin) * (180/Math.PI));
if(cos<0){
addDegree = 90 - Math.round(Math.asin(sin) * (180/Math.PI));
degree = 90 + addDegree;
}
if(degree < 0){
degree = 360 + degree;
}
return degree;
}