javascript - 使用 Javascript/jQuery 获取 rotate3d 值

Question

具有具有以下转换的元素:

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
)

正在解决the equations获取此值的唯一方法？

知道 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));

fiddle here .更多信息 here .

---

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

matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)

因此您可以应用完全相同的方法来解决这两种情况，您只需要更新提取值的方法。