Obtenir CSS propriété transform avec jQuery

Je vais essayer d'obtenir les -webkit-transform: translateY('') propriété dans une variable.

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

C'est le retour '0', au lieu de la valeur correcte.

Quel navigateur utilisez-vous? Dans Chrome, vous devez obtenir la valeur avec .css('-webkit-transform') - votre code renvoie undefined pour cette fonction ainsi, le partage d'échec. Méfiez-vous de la croix-navigateur problèmes avec cette
Je suis en utilisant google Chrome. Si la Prise de la réponse qu'a fait le tour.
Vous auriez mieux pour récupérer sertie de valeur à partir de: $('.form-con')[0].style['webkitTransform']

OriginalL'auteur colmtuite | 2014-02-24

  1. 22
    $('.foo').click(function() {
    var current_pull = parseInt($('.form-con').css('transform').split(',')[5]);
});
    Me donne toujours 0 dos

    OriginalL'auteur James Hibbard

  2. 32

    Vous pouvez utiliser:

     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
    Dans ce cas, matrix[12] et matrix[13] pertinentes?
    c'est en cas de transformation 3d où la matrice de 4*4 la taille est définie. Vérifier tiers propriété dans la doc ici w3schools.com/cssref/css3_pr_transform.asp
    T-il un sens encore diffèrent entre "- moz-transform', '-ms-transform', etc. depuis tous les navigateurs sont compatibles à " tourner (nnn deg)' ?
    Même si je préfère la regex ici sur le plus d'habitude je suis venu à travers pour obtenir les valeurs, j'ai remarqué qu'un petit nombre de bandes de l'e la notation de la valeur en la faisant devenir une NaN.

    OriginalL'auteur Milind Anantwar

  3. 3

    Je pense que la réponse est ici:

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

    OriginalL'auteur Hoàng Vũ Tgtt

  4. 0

    Je pense que l'ordre des propriétés est de durée indéterminée.

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

    OriginalL'auteur kamiyam