获取元素 -moz-transform: 在 jQuery 中旋转值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8270612/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get element -moz-transform:rotate value in jQuery
提问by Goldie
I have CSS style for a layer:
我有一个图层的 CSS 样式：
.element {
-webkit-transform: rotate(7.5deg);
-moz-transform: rotate(7.5deg);
-ms-transform: rotate(7.5deg);
-o-transform: rotate(7.5deg);
transform: rotate(7.5deg);
}
Is there a way to get curent rotation value through jQuery?
有没有办法通过jQuery获取当前旋转值？
I tried this
我试过这个
$('.element').css("-moz-transform")
The result is matrix(0.991445, 0.130526, -0.130526, 0.991445, 0px, 0px)which doesn't tell me a lot. What I'm looking to get is 7.5.
结果是matrix(0.991445, 0.130526, -0.130526, 0.991445, 0px, 0px)这并没有告诉我很多。我想要得到的是7.5.
回答by TwystO
Here's my solution using jQuery.
这是我使用 jQuery 的解决方案。
This returns a numerical value corresponding to the rotation applied to any HTML element.
这将返回一个与应用于任何 HTML 元素的旋转相对应的数值。
function getRotationDegrees(obj) {
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
if(matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
} else { var angle = 0; }
return (angle < 0) ? angle + 360 : angle;
}
angle1 = getRotationDegrees($('#myDiv'));
angle2 = getRotationDegrees($('.mySpan a:last-child'));
etc...
等等...
回答by andreacanton
I've found a bug/features in the Twist's code: the function return negativeangles.
我在 Twist 的代码中发现了一个错误/功能：函数返回负角。
So I've add a simple line of code before returning the angle:
所以我在返回之前添加了一行简单的代码angle：
if(angle < 0) angle +=360;
Than the results will be:
结果将是：
function getRotationDegrees(obj) {
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
if(matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
} else { var angle = 0; }
if(angle < 0) angle +=360;
return angle;
}
回答by Pigalev Pavel
My Solution (using jQuery):
我的解决方案（使用 jQuery）：
$.fn.rotationInfo = function() {
var el = $(this),
tr = el.css("-webkit-transform") || el.css("-moz-transform") || el.css("-ms-transform") || el.css("-o-transform") || '',
info = {rad: 0, deg: 0};
if (tr = tr.match('matrix\((.*)\)')) {
tr = tr[1].split(',');
if(typeof tr[0] != 'undefined' && typeof tr[1] != 'undefined') {
info.rad = Math.atan2(tr[1], tr[0]);
info.deg = parseFloat((info.rad * 180 / Math.PI).toFixed(1));
}
}
return info;
};
Usage:
用法：
$(element).rotationInfo(); // {deg: 7.5, rad: 0.13089969389957515}
$(element).rotationInfo().deg; // 7.5
回答by Ivo Renkema
Here is a plug-in version of Twist's function. Also, the conditional if(matrix !== 'none')did not work for me. So I have added type-checking:
这是 Twist 功能的插件版本。此外，条件if(matrix !== 'none')对我不起作用。所以我添加了类型检查：
(function ($) {
$.fn.rotationDegrees = function () {
var matrix = this.css("-webkit-transform") ||
this.css("-moz-transform") ||
this.css("-ms-transform") ||
this.css("-o-transform") ||
this.css("transform");
if(typeof matrix === 'string' && matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
} else { var angle = 0; }
return angle;
};
}(jQuery));
Use as follows:
使用方法如下：
var rotation = $('img').rotationDegrees();
回答by adeneo
The CSS tranform property will always return a matrix value, as rotate, skew, scale etc. is just shorthand for doing things easier, and not having to calculate the matrix value everytime, however the matrix is calculated by the browser and applied as a matrix, and when that is done it can no longer return the rotated degree by angle without recalculating the matrix back again.
CSS 转换属性将始终返回一个矩阵值，因为旋转、倾斜、缩放等只是为了使事情更容易，不必每次都计算矩阵值，但是矩阵由浏览器计算并作为矩阵应用，并且完成后，它不能再返回按角度旋转的度数，而无需再次重新计算矩阵。
To make such calcualtions easier there is a javascript library called Sylvesterthat was created for the purpose of easy matrix calculation, try looking at that to get the rotation degree from the matrix value.
为了使这种计算更容易，有一个名为Sylvester的 javascript 库，它是为了简单的矩阵计算而创建的，尝试查看它以从矩阵值中获取旋转度。
Also, if you where to write a rotate function in javascript to translate rotational degrees to a matrix, it would probably look something like this (this uses sylvester for the last calculation) :
此外，如果您在 javascript 中编写旋转函数以将旋转度数转换为矩阵，它可能看起来像这样（最后一次计算使用 sylvester）：
var Transform = {
rotate: function(deg) {
var rad = parseFloat(deg) * (Math.PI/180),
cos_theta = Math.cos(rad),
sin_theta = Math.sin(rad);
var a = cos_theta,
b = sin_theta,
c = -sin_theta,
d = cos_theta;
return $M([
[a, c, 0],
[b, d, 0],
[0, 0, 1]
]);
}
};
Now all you really have to do is reverse enginer that function and you're golden :-)
现在你真正需要做的就是对该功能进行逆向工程，你就是金子:-)
回答by Goldie
This script is very helpful https://github.com/zachstronaut/jquery-css-transform
这个脚本非常有用 https://github.com/zachstronaut/jquery-css-transform
回答by Bragon95
I have make a fiddle with this working code to get rotateX Y Z on a 3D , or rotateZ for a 2D transform. Thanks to mihn for the base code that i have little updated with actual jquery 2.2.3. I currently use this solution for my own projects.
我对这个工作代码做了一些修改，以在 3D 上获得 rotateX YZ ，或在 2D 变换中获得 rotateZ 。感谢 mihn 的基本代码，我几乎没有用实际的 jquery 2.2.3 更新。我目前将此解决方案用于我自己的项目。
https://jsfiddle.net/bragon95/49a4h6e9/
https://jsfiddle.net/bragon95/49a4h6e9/
//
//Thanks: Adapted on base code from mihn http://stackoverflow.com/a/20371725
//
function getcsstransform(obj)
{
var isIE = /(MSIE|Trident\/|Edge\/)/i.test(navigator.userAgent);
var TType="undefined",
rotateX = 0,
rotateY = 0,
rotateZ = 0;
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
if (matrix!==undefined && matrix !== 'none')
{
// if matrix is 2d matrix
TType="2D";
if (matrix.indexOf('matrix(') >= 0)
{
var values = matrix.split('(')[1].split(')')[0];
if (isIE) //case IE
{
angle = parseFloat(values.replace('deg', STR_EMPTY));
}else
{
values = values.split(',');
var a = values[0];
var b = values[1];
var rotateZ = Math.round(Math.atan2(b, a) * (180 / Math.PI));
}
}else
{
// matrix is matrix3d
TType="3D";
var values = matrix.split('(')[1].split(')')[0].split(',');
var sinB = parseFloat(values[8]);
var b = Math.round(Math.asin(sinB) * 180 / Math.PI);
var cosB = Math.cos(b * Math.PI / 180);
var matrixVal10 = parseFloat(values[9]);
var a = Math.round(Math.asin(-matrixVal10 / cosB) * 180 / Math.PI);
var matrixVal1 = parseFloat(values[0]);
var c = Math.round(Math.acos(matrixVal1 / cosB) * 180 / Math.PI);
rotateX = a;
rotateY = b;
rotateZ = c;
}
}
return { TType: TType, rotateX: rotateX, rotateY: rotateY, rotateZ: rotateZ };
};
mAngle = getcsstransform($("#Objet3D"));
if (mAngle.TType=="2D")
{
$("#Result").html("Transform 2D [rotateZ=" + mAngle.rotateZ + "°]");
}else
{
$("#Result").html("Transform 3D [rotateX=" + mAngle.rotateX + "°|rotateY=" + mAngle.rotateY + "°|rotateZ=" + mAngle.rotateZ + "°]");
}
回答by Jake6192
If you're willing to use in-line styling for just this transformation, then you can use jQuery to get the contents of the style tag:
如果您愿意为这种转换使用内联样式，那么您可以使用 jQuery 来获取样式标记的内容：
parseInt($( /*TODO*/ ).attr('style').split('rotate(')[1].split('deg)')[0]);
回答by Vadim Kalinin
Also you could replace var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));to var angle = Math.round(Math.acos(a) * (180/Math.PI));
你也可以替换var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));为var angle = Math.round(Math.acos(a) * (180/Math.PI));
回答by Lucia
Since I constantly need to use jQuery together with TweenMax and since TweenMax already took care of all the parsing of various types of transformation strings as well as compatibility issues, I wrote a tiny jquery plugin here(more of a wrap up of gsap's) that could directly access these values like this:
由于我经常需要将 jQuery 与 TweenMax 一起使用，并且由于 TweenMax 已经处理了各种类型转换字符串的所有解析以及兼容性问题，因此我在这里编写了一个小 jquery 插件（更多是对 gsap 的总结），它可以像这样直接访问这些值：
$('#ele').transform('rotationX') // returns 0
$('#ele').transform('x') // returns value of translate-x
The list of properties you could get/set, along with their initial properties:
您可以获取/设置的属性列表及其初始属性：
perspective: 0
rotation: 0
rotationX: 0
rotationY: 0
scaleX: 1
scaleY: 1
scaleZ: 1
skewX: 0
skewY: 0
x: 0
y: 0
z: 0
zOrigin: 0
Paste from my other answer, hope this helps.
从我的另一个答案粘贴，希望这有帮助。
