从Matrix3d获得精确的旋转角度 [英] Get exact rotation angle from matrix3d

问题描述

我有一些元素

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

使用旋转变换样式

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

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

window.getComputedStyle返回矩阵3d。

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

但是如何从该矩阵中检索旋转角度？

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

推荐答案

我找不到一种简单的方法，但在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。评论中有人注意到，当角度在180度以上时，它不起作用，并提出a solution，但它只能在360度以下起作用。

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

这篇关于从Matrix3d获得精确的旋转角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！