掌握的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的

回答

相關問題