gpt4 book ai didi

jquery - 从matrix3d获取CSS3旋转周期数

转载 作者:行者123 更新时间:2023-12-01 05:55:17 26 4
gpt4 key购买 nike

我正在尝试使用 CSS3 rotateY 旋转图像。我需要使用 jQuery 获取旋转 Angular 。

我的问题是了解图像旋转了多少周期。

示例:

180 degrees: matrix3d(-1, 0, -0.00000000000000012246467991473532, 0, 0, 1, 0, 0, 0.00000000000000012246467991473532, 0, -1, 0, 0, 0, 0, 1) 
360 degrees: matrix3d(1, 0, 0.00000000000000024492935982947064, 0, 0, 1, 0, 0, -0.00000000000000024492935982947064, 0, 1, 0, 0, 0, 0, 1)
540 degrees: matrix3d(-1, 0, -0.00000000000000036739403974420594, 0, 0, 1, 0, 0, 0.00000000000000036739403974420594, 0, -1, 0, 0, 0, 0, 1)
720 degrees: matrix3d(1, 0, 0.0000000000000004898587196589413, 0, 0, 1, 0, 0, -0.0000000000000004898587196589413, 0, 1, 0, 0, 0, 0, 1)

正如您所见,每旋转 180 度,第三个元素的绝对值就会增加 0.00000000000000012246467991473532。我会对这个结果感到满意,但是在某些时候这个逻辑会破裂并且不再适用。

在第 4 个周期之后,添加的数字变为随机。

获取旋转周期数的正确方法是什么?

最佳答案

-------------------------- TL;DR -------------- ---------------

function getRotationCycle (domElement, axis) {

var computedStyle = window.getComputedStyle(domElement),
matrixStyle = computedStyle.transform || computedStyle.WebkitTransform || computedStyle.MozTransform || computedStyle.msTransform || computedStyle.OTransform || computedStyle.KhtmlTransform;

if (!matrixStyle || matrixStyle.substr(0, 9) !== 'matrix3d(') {
//return 0; //????
throw "Something's wrong with 3D transform style. Probably no style applied at all OR unknown CSS3 vendor OR unknown/unsupported 3D matrix representation string OR CSS3 3D transform is not fully supported in this browser";
}

var matrix = WebKitCSSMatrix && (new WebKitCSSMatrix(matrixStyle)) ||
MozCSSMatrix && (new MozCSSMatrix(matrixStyle)) ||
MsCSSMatrix && (new MsCSSMatrix(matrixStyle)) ||
OCSSMatrix && (new OCSSMatrix(matrixStyle)) ||
CSSMatrix && (new CSSMatrix(matrixStyle)));

if (!matrix || isNaN(matrix.a) || isNaN(matrix.b) || isNaN(matrix.c)) {
//not sure about all versions of FireFox
throw "Could not catch CSSMatrix constructor for current browser, OR the constructor has returned a non-standard matrix object (need [a b c] numerical properties to work)";
}

var rotation;

// todo: giving an axis array is a good idea, or we could return all three rotations if no parameter given

switch (axis.toUpperCase()) {
case 'X':
rotation = Math.acos(matrix.a);
break;
case 'Y':
rotation = Math.asin(matrix.b);
break;
case 'Z':
throw "TODO: Sorry, Math people. I really need help here! Please implement this case for me. This will help you: http://9elements.com/html5demos/matrix3d/";
//rotation = Math.acos(matrix.a);
break;
default:
throw "This function accepts rotation axis name (string) as the first parameter. Possible values: 'X', 'Y', 'Z'";
}

//if (isNaN(rotation))...

rotation *= 180/Math.PI; //getting rotation in degrees. This is good for me for debug purposes but bad for performance, of course, ...

return rotation % 360; // ... so you can skip degrees and do it in radians only
}

这里给出了一些更精彩的文档:https://developer.mozilla.org ,谷歌和微软好像没什么用,苹果有some .

<小时/>

一切都从这篇文章开始:css3 converting matrix3d values 。感谢作者提供的起点和数学转换。

但是给出的答案并不完整,它仅适用于 WebKit。

工作代码是用纯 JavaScript 编写的,因为:- 它可以复制粘贴到任何环境- 它的工作速度有点(或快得多,取决于)

如果您想要 jQuery 版本,请使用此代码片段获取 matrixStyle 字符串。

var matrixStyle = element$.css('transform')) || element$.css('-webkit-transform')) || element$.css('-moz-transform')) || element$.css('-ms-transform')) || element$.css('-o-transform')); // jQuery

矩阵的每个部分的解释如下:http://9elements.com/html5demos/matrix3d/

关于jquery - 从matrix3d获取CSS3旋转周期数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16373472/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com