使用 Javascript / jQuery 获取 rotate3d 值答案

【问题标题】：Getting rotate3d values with Javascript / jQuery使用 Javascript / jQuery 获取 rotate3d 值
【发布时间】：2016-10-04 12:18:28
【问题描述】：

有一个具有以下变换的元素：

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

我希望能够使用 Javascript/jQuery 获取值 -50。 我想得到绝对值，所以如果是370度，我不想得到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);

难道没有更快的替代方案吗？

【问题讨论】：

首先如何设置值？你能简单地跟踪它吗？
我正在使用 css3 过渡。所以不，在动画期间它无法被跟踪。因此问题:)
paper.js 有一些很好的函数来处理这个问题，但我也很想听听一些原生解决方案......paperjs.org/reference/matrix

标签： javascript jquery css css-transforms rotatetransform

【解决方案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：

matrix(a, b, c, d, tx, ty) 是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty , 0, 1)

因此，无论哪种情况，您都可以应用完全相同的方法来求解，您只需要更新提取值的方法。

【讨论】：

您是否注意到 st.getPropertyValue('transform') 返回的矩阵与问题中的不完全相同？
是的，我认为这将提供构建工作版本所需的要点。我已经更新了答案以解释没有太大区别。
很好......自从我复制了你的 Math.atan2 角度计算，我觉得我必须给你一个点！
看起来不错！但它不适用于 rotateX 值？你的例子是使用rotateZ，我想我应该在最后一行选择其他索引？ jsfiddle.net/apg5e2kv/2

【解决方案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/

【讨论】：

看起来不错，但以 -180 度失败并返回 -129 吗？ jsfiddle.net/apg5e2kv/4
此外，任何超过 180 的值都不会被这样检索，例如 -350 将返回 10。而且我感兴趣的是绝对值而不是相对值。
我将为此编写一个完整的支持代码并更新问题。请给我几个小时;D
只是说，想法不错，可惜解决不了问题中提出的问题。
别多想了。没有数学解决方案。我会提供我自己的答案来解释它。

【解决方案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

【讨论】：

这真的很有趣，但是我们能有一个好的相对解决方案吗？我还在尝试......（我的意思是没有 180º 到 129º 的错误并且具有合理的性能）