使用 Javascript / jQuery 获取 rotate3d 值

Question

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

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

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

使用 $('#element').css('transform') returns 这样的矩阵：

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 as 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. More info 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)

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="el"></div>

如果你想使用库，你可以使用其中之一：

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 值

Getting rotate3d values with Javascript / jQuery

javascript

css

jquery

rotatetransform

css-transforms