Javascript 使用jQuery获取CSS转换属性

我试图在变量中获取

-webkit transform:translateY（“”）

属性

HTML

这将返回“0”，而不是正确的值。

您可以使用：

$('.foo').click(function() {
    var current_pull = parseInt($('.form-con').css('transform').split(',')[5]);
});

 var obj = $('.form-con');
 var transformMatrix = obj.css("-webkit-transform") ||
   obj.css("-moz-transform")    ||
   obj.css("-ms-transform")     ||
   obj.css("-o-transform")      ||
   obj.css("transform");
 var matrix = transformMatrix.replace(/[^0-9\-.,]/g, '').split(',');
 var x = matrix[12] || matrix[4];//translate x
 var y = matrix[13] || matrix[5];//translate y

我认为答案是：

函数getRotationDegrees（obj）{ 变量矩阵=obj.css（“-webkit transform”）|| css（“-moz转换”）|| 对象css（“-ms转换”）|| 对象css（“-o-transform”）|| 对象css（“转换”）； 如果（矩阵！=“无”）{ var values=matrix.split（“（”）[1]。split（“）”）[0]。split（“，”）； var a=数值[0]； var b=数值[1]； 变量角度=数学圆（数学atan2（b，a）*（180/数学PI））； }else{var angle=0；} //返回（角度<0）？角度+360：角度； 返回角； }

---

我认为属性的顺序是不确定的

var matrix = $obj.css('transform');
var translate = {};

// translateX 
var matchX = matrix.match(/translateX\((-?\d+\.?\d*px)\)/);
if(matchX) {
  translate.x = matchX[1];
}

// translateY
var matchY = matrix.match(/translateY\((-?\d+\.?\d*px)\)/);
if(matchY) {
  translate.y = matchY[1];
}

console.log(translate);

---

你用的是什么浏览器？在Chrome中，您必须使用

.css（'-webkit transform'）

获取值-您的代码返回该函数的未定义值，因此拆分失败。小心跨浏览器的问题，我用的是Chrome。虽然Jack的回答起了作用。您最好从以下位置检索设置的值：

$（'.form con'）[0]。style['webkitTransform']

在什么情况下，矩阵[12]和矩阵[13]相关？@StevenPalinkas：这是在定义了4*4大小矩阵的3d变换的情况下。检查doc中的第三个属性这里的'-moz transform'、'-ms transform'等之间的区别是否有意义？因为所有浏览器都兼容“rotate（nnn deg）”？尽管我更喜欢这里的正则表达式，而不是我遇到的获取值的更常用方法，我确实注意到，对于一个特别小的数字，它从值中去掉了e符号，使其成为

NaN

。始终返回0

 var obj = $('.form-con');
 var transformMatrix = obj.css("-webkit-transform") ||
   obj.css("-moz-transform")    ||
   obj.css("-ms-transform")     ||
   obj.css("-o-transform")      ||
   obj.css("transform");
 var matrix = transformMatrix.replace(/[^0-9\-.,]/g, '').split(',');
 var x = matrix[12] || matrix[4];//translate x
 var y = matrix[13] || matrix[5];//translate y

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

var matrix = $obj.css('transform');
var translate = {};

// translateX 
var matchX = matrix.match(/translateX\((-?\d+\.?\d*px)\)/);
if(matchX) {
  translate.x = matchX[1];
}

// translateY
var matchY = matrix.match(/translateY\((-?\d+\.?\d*px)\)/);
if(matchY) {
  translate.y = matchY[1];
}

console.log(translate);