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

小提琴here。更多信息here。

注意：给出的示例是在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

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

＆＃13;

FIND_IN_SET

＆＃13;

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

＆＃13;

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

＆＃13;

如果您想使用库，可以使用以下方法之一：

http://github.com/Luxiyalu/jquery-transformer

http://paperjs.org/reference/matrix/

Answer 3

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

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

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)

Reproduction online

使用Javascript / jQuery获取rotate3d值

3 个答案: