javascript - 从 matrix3d 获取精确的旋转 Angular

Question

我有一些元素

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

旋转变换样式

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

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

window.getComputedStyle 返回 matrix3d。

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

但是如何从这个矩阵中检索旋转 Angular 呢？

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

Answer 1

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

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。评论中的一些人注意到当 Angular 超过 180 度时它不起作用并提供 a solution ，但它只适用于 360 度。

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