使用Javascript / jQuery获取rotate3d值

具有以下转换的元素：

style="transform: rotate3d(1, 0, 0, -50deg);" 

我希望能够使用Javascript / jQuery获得-50的值。 我想得到绝对值，所以如果它是370deg，我不想得到10，而是370。

使用$('#element').css('transform')返回如下矩阵：

 matrix3d(1, 0, 0, 0, 0, 0.642788, -0.766044, 0, 0, 0.766044, 0.642788, 0, 0, 0, 0, 1) 

哪个可以更好地表示为：

 matrix3d( 1, 0, 0, 0, 0, 0.642788, -0.766044, 0, 0, 0.766044, 0.642788, 0, 0, 0, 0, 1 ) 

解决方程是获得这个值的唯一方法吗？

知道Z = 0和X = 1为rotate3d（1,0,0，-50deg）;

没有更快的替代方案吗？

Answer 1

虽然它仍然需要对矩阵值进行计算，但我能找到的最简单的例子如下：

 var el = document.getElementById('test'); var st = window.getComputedStyle(el, null); var m = st.getPropertyValue('transform'); var values = m.slice(7,-1).split(','); // angle is in range -180 > 180 var angle = Math.round(Math.atan2(values[1], values[0]) * (180/Math.PI)); 

在这里小提琴。 更多信息在这里 。

---

注意：给出的示例是在matrix而不是matrix3d上测试的。 但是来自MDN：

矩阵（a，b，c，d，tx，ty）是matrix3d的简写（a，b，0,0，c，d，0,0,0,0,1,0，tx，ty，0， 1）

因此，您可以在任何一种情况下应用完全相同的方法来解决，您只需要更新拉出值的方法。

Answer 2

我能提出的最简单的解决方案……

 var el = $('.el'); var matrix = el.css('transform'); var values = matrix.split('(')[1].match(/-?[\d\.]+/g); var rad = Math.atan2(values[6], values[5]); if ( rad < 0 ) rad += (2 * Math.PI); var angle = rad * (180/Math.PI); el.text(Math.round(angle)); 

 .el { width: 50px; height: 50px; background: tomato; transform: rotate3d(1, 0, 0, 60deg); } 

Answer 3

我应该多加注意它。 过了一会儿，我意识到这不能用数学方法解决。 如果我想获得确切的绝对度而不是相对的度数，那就不是了。

我们通过370度的变换获得的矩阵与我们通过10度的变换获得的矩阵完全相同。 因此，对于具有完全相同输入的alpha，不可能得到两个不同的结果值。

with transform: rotate3d(1, 0, 0, 10deg); 我们得到：

 matrix3d(1, 0, 0, 0, 0, 0.984808, 0.173648, 0, 0, -0.173648, 0.984808, 0, 0, 0, 0, 1) 

并使用transform: rotate3d(1, 0, 0, 370deg); 完全相同的一个：

 matrix3d(1, 0, 0, 0, 0, 0.984808, 0.173648, 0, 0, -0.173648, 0.984808, 0, 0, 0, 0, 1) 

在线复制