使用jQuery獲取CSS轉換屬性

Question

我試圖在變量中獲取-webkit-transform: translateY('')屬性。

HTML

<form class="form-con" style="-webkit-transform: translateY(-802px);"></form>

JS

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

這將返回“0”，而不是正確的值。

Answer 1

您可以使用：

 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

Answer 2

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

Answer 3

我想答案就在這里 ：

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

Answer 4

我認為屬性的順序是不確定的。

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