掌握的Javascript/jQuery的

ROTATE3D值遇到了下列变的元素：掌握的Javascript/jQuery的

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（，0，0 ，-50deg）;

是不是有什么更快的替代呢？

来源

2016-10-04 Alvaro

如何取值为在第一位置设置？你能简单地跟踪它吗？ –

我正在使用css3转换。所以不行，在动画过程中无法跟踪。因此，这个问题:) – Alvaro

paper.js有一些很好的功能来处理这一点，但我很想听听一些本地解决方案以及... http://paper.ws/reference/matrix/ – rafaelcastrocouto

我应该多加注意一下。过了一段时间，我意识到这不能从数学上解决。 不是，如果我想得到确切的绝对度，而不是相对的。

我们用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

来源

2016-10-05 09:50:59 Alvaro

这真的很有趣，但我们可以有一个很好的相对解决方案吗？我仍然在努力......（我的意思是没有180º至129º的误差并且性能合理） – rafaelcastrocouto

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

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）是矩阵3d（a，b，0,0，c，d，0,0,0,0， 1，0，tx，ty，0，1）

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

来源

2016-10-04 12:43:22

您是否注意到由st.getPropertyValue（'transform'）返回的矩阵与问题中的不完全相同？ – rafaelcastrocouto

是的，我认为这将提供构建工作版本所需的要点。我已经更新了答案，以解释没有多大区别。 –

不错......我觉得自从我复制了Math.atan2角度计算之后，我不得不给你一个观点！ – rafaelcastrocouto

最简单的解决方案，我可以拿出...

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/

来源

2016-10-04 13:01:54 rafaelcastrocouto

看起来不错，但失败-180度，并返回-129而不是？ https://jsfiddle.net/apg5e2kv/4/ – Alvaro

此外，超过180的任何值都不会被检索到，例如'-350'将返回'10'。我对绝对价值感兴趣，而不是相对的。 – Alvaro

我要为此写一个完整的支持代码并更新问题。只要给我几个小时; D – rafaelcastrocouto

掌握的Javascript/jQuery的

回答

相关问题