从matrix3d获取准确的旋转角度

【问题标题】：Get exact rotation angle from matrix3d从matrix3d获取准确的旋转角度
【发布时间】：2023-04-05 12:09:01
【问题描述】：

我有一些元素

<div id="element"></div>

带有旋转变换样式

-webkit-transform: rotateX(-1100deg);

有没有办法从计算的样式中获得精确的 (-1100) 旋转角度？

window.getComputedStyle 返回 matrix3d。

var element = document.getElementById('element'),
    cs = getComputedStyle(element),
    matrix = new WebKitCSSMatrix(cs['-webkit-transform']);

但是如何从这个矩阵中获取旋转角度呢？

我需要计算样式，因为我试图在元素过渡期间获得角度。

【问题讨论】：

标签： javascript html css css-transforms

【解决方案1】：

我找不到简单的方法来做到这一点，但在this article 的帮助下，我设法获得了价值（有点）。

var myElement = document.getElementById('element');
var myTransform = window.getComputedStyle(myElement,null)
var myTransform = myTransform.getPropertyValue("-webkit-transform");
var myTransform = myTransform.split(' ');
var myX = myTransform[6].split(",")[0];
var angle = Math.round(Math.asin(myX) * (180/Math.PI));
console.log(angle);

它返回 -20，即 -360 * 3 = -1080 + 增加的 20 度旋转。 -20。 cmets中的一些人注意到它在角度超过180度时不起作用并提供a solution，但它只能在360度范围内起作用。

我认为如果您使用 javascript 来动态控制元素的转换会容易得多，因为没有更简单的方法可以获取旋转的 getComputedStyle 值。

【讨论】：

据我所知，不可能得到精确的角度，因为 360 度和 720 度的矩阵是相同的jsfiddle.net/WsN4W。但是我在你建议的 360 度解决方案的帮助下解决了这个问题。谢谢。