获取元素-moz-transform：在jQuery中旋转值

我有一个图层的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); } 

有没有一种方法可以通过jQuery获得医生轮值？

我试过这个

 $('.element').css("-moz-transform") 

结果是matrix(0.991445, 0.130526, -0.130526, 0.991445, 0px, 0px) ，这并没有告诉我很多。 我想要得到的是7.5 。

Answer 1

这是我使用jQuery的解决scheme。

这将返回与应用于任何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')); 

等等…

Answer 2

我在Twist的代码中发现了一个bug /function：函数返回负angular。

所以我在返回angle之前添加了一行简单的代码：

 if(angle < 0) angle +=360; 

比结果将是：

 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; } 

Answer 3

这是一个Twist函数的插件版本。 另外，条件if（matrix！=='none'）不适合我。 所以我添加了types检查：

 (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)); 

使用方法如下：

 var rotation = $('img').rotationDegrees(); 

Answer 4

CSS的tranform属性总是会返回一个matrix的值，因为旋转，倾斜，比例等只是简单的事情，并不需要每次计算matrix的值，但matrix是由浏览器计算出来的，并作为matrix，当完成时，不能再按angular度返回旋转angular度，而不需要再次重新计算matrix。

为了使这种计算更容易，有一个名为Sylvester的JavaScript库，它是为了便于计算matrix而创build的，试着从matrix值中获取旋转度。

另外，如果你在javascript中编写旋转函数来将旋转度转换为matrix，它可能看起来像这样（这使用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] ]); } }; 

现在你真正需要做的是反向引擎，它的function和你是金的:-)

Answer 5

我的解决scheme（使用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; }; 

用法 ：

 $(element).rotationInfo(); // {deg: 7.5, rad: 0.13089969389957515} $(element).rotationInfo().deg; // 7.5 

Answer 6

这个脚本是非常有用的https://github.com/zachstronaut/jquery-css-transform

Answer 7

如果按照您所描述的方式执行此操作，则只有这样才能真正修改对象的变换，因为您的浏览器不能同时使用所有4种浏览器，所分配的一些前缀值仍然完全按照你的分配。 例如，如果你使用webkit，那么this.css('-o-transform')仍然会返回'rotate(7.5deg) '，所以只需/rotate\((.*)deg\)/它匹配到/rotate\((.*)deg\)/ 。

这对我来说工作得很好：我总是分配5个CSS风格，并回读所有五种风格，希望至less有一个风格不变。 我不知道这是否工作，如果样式是在CSS（不是在JS中）设置。

Answer 8

你也可以replacevar angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); var angle = Math.round(Math.acos(a) * (180/Math.PI));

Answer 9

由于我经常需要使用jQuery与TweenMax一起，因为TweenMax已经处理了各种types的转换string的所有parsing以及兼容性问题，所以我在这里写了一个小的jquery插件（更多的是gsap的包装），可以直接访问这些值：

 $('#ele').transform('rotationX') // returns 0 $('#ele').transform('x') // returns value of translate-x 

您可以获取/设置的属性列表以及它们的初始属性：

 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 

从我的其他答案粘贴，希望这有助于。

Answer 10

我已经做了这个工作代码的小提琴旋转X YZ在3D上，或旋转Z为2D变换。 感谢mihn的基本代码，我几乎没有更新实际的jQuery 2.2.3。 我目前使用这个解决scheme为我自己的项目。

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 + "°]"); }