Comment lire individu transformer les valeurs en JavaScript?

Webkit du blog de l'année dernière sur Les transformations 3D explique les différentes transformer "fonctions", qui peut être utilisé dans l'-webkit-transform propriété. Par exemple:

#myDiv {
  -webkit-transform: scale(1.1) rotateY(7deg) translateZ(-1px);
}

Ma question: comment avez-vous accès aux valeurs individuelles en JavaScript? Quand vous lisez les webkitTransform propriété de l'élément, vous obtenez juste un matrix3d() fonction avec 16 valeurs, comme ça...

matrix3d(0.958684, 0.000000, .....)

Est-il un moyen de lire la valeur d'un individu transformer la chose, comme rotateY()? Ou dois-je le lire à partir de la matrix3d() string, et comment?

OriginalL'auteur callum | 2010-08-07

  1. 12
    //Suppose the transformed element is called "cover".
var element = document.getElementById('cover');
computedStyle = window.getComputedStyle(element, null); //"null" means this is not a pesudo style.
//You can retrieve the CSS3 matrix string by the following method.
var matrix = computedStyle.getPropertyValue('transform')
    || computedStyle.getPropertyValue('-moz-transform')
    || computedStyle.getPropertyValue('-webkit-transform')
    || computedStyle.getPropertyValue('-ms-transform')
    || computedStyle.getPropertyValue('-o-transform');

//Parse this string to obtain different attributes of the matrix.
//This regexp matches anything looks like this: anything(1, 2, 3, 4, 5, 6);
//Hence it matches both matrix strings:
//2d: matrix(1,2,3,4,5,6)
//3d: matrix3d(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16);
var matrixPattern = /^\w*\((((\d+)|(\d*\.\d+)),\s*)*((\d+)|(\d*\.\d+))\)/i;
var matrixValue = [];
if (matrixPattern.test(matrix)) { //When it satisfy the pattern.
    var matrixCopy = matrix.replace(/^\w*\(/, '').replace(')', '');
    console.log(matrixCopy);
    matrixValue = matrixCopy.split(/\s*,\s*/);
}

    Espérons que cette aide!
    Notez que je n'ai pas utiliser une autre bibliothèque, à l'exception de la plaine API DOM et Javascript natif RegExp fonction. Par conséquent, cela devrait fonctionner universellement croix des navigateurs et des applications.

    Bien que cela divise chaque matrice de valeur dans un tableau, les valeurs ne représentent pas les CSS les propriétés de transformation, et par conséquent, ne pas répondre à l'OP de la question.

    OriginalL'auteur lixiang

  2. 3

    Je pense que, comme syockit dit, le parcours des feuilles de style est la seule façon d'aller, vous pouvez utiliser webkitMatchesSelector de découvrir les règles qui correspondent à votre élément:

    var theRules = new Array();
var theStylesheet = document.styleSheets;
if (document.styleSheets[0].cssRules)
        theRules = document.styleSheets[0].cssRules
else if (document.styleSheets[0].rules)
        theRules = document.styleSheets[0].rules

var elem = document.getElementById("myDiv");

for (var i=0; i < theRules.length; i++) {
    if (elem.webkitMatchesSelector(theRules[i].selectorText)) {
        var theStyles = theRules[i].style;
        var j = theStyles.cssText.indexOf('-webkit-transform:');
        if (j>-1) {
            var s = theStyles.cssText.substring(j,theStyles.cssText.length).indexOf(';'); 
            document.getElementById("output").innerHTML=theStyles.cssText.substring(j+18,s);
        }
    }
}

    Cela suppose de balisage quelque chose comme cela, j'ai ajouté un peu plus de règles et de valeurs pour s'assurer que j'étais en tirant les bonnes valeurs. Si vous avez plus d'une feuille de style alors vous avez besoin d'ajuster la première partie pour itérer sur toutes les feuilles de style trop, et vous aurez probablement à faire face avec la spécificité si votre -webkit-transform apparaît dans plus d'une règle:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Get style</title>
    <style>
    div {
        margin: 2em;
        padding: 2em;
    }
    #myDiv {
        -webkit-transform: scale(1.1) rotateY(7deg) translateZ(-1px);
        border: 1px solid;
    }
    </style>
</head>
<body>
    <div id="myDiv">
        Just testing.
    </div>
    <div id="output">
    </div>
</body>
</html>
    +1 Grande réponse, bien que ne fonctionne que pour les CSS styles en ligne
    Je voulais dire "bien que ne fonctionne que pour les internes des feuilles de style"
    J'ai ajouté votre code de violon et n'arrivez pas à lire jsfiddle.net/ypf2wv4g/9

    OriginalL'auteur robertc

  3. 3

    Je suis tombé sur cette question ce matin. Il semble que JavaScript ne peut pas lire un élément style.webkitTransform propriété jusqu'à ce qu'il a été explicitement définie dans l'élément style attribut (soit insérée dans le code HTML ou de la procédure via JavaScript). Comme encombrants que cela puisse paraître, si vous avez besoin de JS pour être en mesure de lire CSS propriétés de transformation, vous pourriez être mieux définir leurs valeurs initiales avec JavaScript lorsque le DOM est prêt.

    Exemple, à l'aide de jQuery:

    $(document).ready(function(){
    $('.transform').css('webkitTransform', 'translateX(0)');
});

    À partir de ce point, vous serez capable de lire de l'élément de transformation de la chaîne et de l'analyser pour les valeurs nécessaires.

    OriginalL'auteur Aaron

  4. 3

    Ancien mais intéressant question et pas de réponse précédente a tenté de répondre.

    Malheureusement, il n'y a pas deux lignes, la solution pour le cas général, et nous ne savons pas sur quelle variété d'étapes de transformation (rotation, de traduire, etc.) besoin d'être rétro-ingénierie; moins il y a de plus facile.

    Au cours des dernières navigateurs basés sur webkit, on peut simplement la requête précédemment affecté à la propriété:

    var element = document.querySelector('div.slipping');
element.style.webkitTransform 
  -> "translate(-464px, 0px)"

    Continuons avec l'hypothèse que le calcul de style doit être utilisé. Le besoin s'en fait sentir, par exemple, si l'élément est dans le milieu d'une transition CSS ou CSS animation, c'est à dire la transformation actuelle n'est pas celle qui a été définie directement.

    La matrice descripteur de chaîne de caractères retournée par getComputedStyle peut en effet être analysé via une regex, mais pas toutes les versions ci-dessus sont fiables, et ils sont trop opaques. Une façon simple de briser la chaîne, sauf si il est dans un très serrée boucle pour justifier une passe de regex, c'est ceci:

    var matrixString = window.getComputedStyle(element).webkitTransform;
var matrix = matrixString
             .split('(')[1]
             .split(')')[0]
             .split(',')
             .map(parseFloat);

    Mais d'une autre manière est tout simplement de l'utiliser, ce qui n'était pas mentionné avant:

    var cssMatrix = new WebKitCSSMatrix(matrixString);

    L'avantage de cette dernière approche est d'obtenir une matrice de 4x4, ce qui est la représentation standard pour les transformations affines, et l'inconvénient est qu'il est bien sûr WebKit spécifiques. Devriez-vous continuer à travailler avec le n-uplet de six valeurs que dans la question, il est défini dans cette partie de la CSS standard.

    Ensuite le transformer, par exemple, la rotation doit être remanié. Il peut y avoir beaucoup de simples transforme directement pris en charge par les CSS, par exemple, de traduire, d'échelle, de rotation, d'inclinaison et de point de vue. Si un seul d'entre eux est appliquée, alors vous avez juste besoin de revenir sur le processus de le calcul de la matrice de transformation.

    Une alternative est de trouver ou de traduire le code qui le fait pour vous en JS, par exemple le même document ou L'article 7.1 de la CSS standard contient de telles annoté algorithmes. L'avantage est que le unmatrix approche est de pouvoir, avec certaines limites, de retour de la 'atomique' transforme même si plus d'une de ces (translation, rotation, etc.) est appliqué. Puisqu'il n'est pas possible de garantir le succès de l'ingénierie inverse de la transformation des mesures pour le cas général, il est utile de réfléchir à quels types de transformations sont éventuellement appliquées, et si dégénérés ou d'autres gênants cas ont été évités. I. e. vous avez besoin pour construire la solution qui vous convient pour votre problème.

    Plus précisément, la matrice des versions de tous les 2D CSS transformations sont documenté ici, ci-dessous la signification des six valeurs dans le CSS de transformation 2D vectoriel.

    Un autre inconvénient est qu'il y a d'autres choses qui influent sur le résultat visuel en termes d'opérations géométriques, par exemple, transform-origin.

    OriginalL'auteur Robert Monfera

  5. 2

    Ce lien de Dev Apple de Référence peut jeter plus de lumière sur le sujet:

    La webkitTransform propriété est un
    représentation sous forme de chaîne d'une liste de
    les opérations de transformation. Habituellement, cette
    la liste contient une unique matrice
    une opération de transformation. Pour la 3D
    transforme, la valeur est
    "matrix3d(...)" avec les 16 valeurs de
    le 4x4 homogène de matrice entre les
    entre parenthèses. Pour les transformations 2D, l'
    la valeur est une "matrice de(...)" chaîne
    contenant les 6 vecteur de valeurs.

    OriginalL'auteur donohoe

  6. 1

    Puisque vous obtenez seulement la finale de la matrice de la valeur calculée à partir de la style, vous pourriez avoir à vérifier l'élément de style en ligne ou de la feuille de style de règles. Si element.style.webkitTransform vous donne rien, vous pouvez parcourir le document de feuilles de style, et de voir celui qui correspond à votre élément. Ensuite, vous pouvez regex l' webkitTransform propriété pour obtenir/définir la valeur.

    OriginalL'auteur syockit

  7. 1

    vous pouvez utiliser des regex pour obtenir une carte de propriété-valeur:

    si la variable transformstyle contient la valeur de style

      //get all transform declarations
 (transformstyle.match(/([\w]+)\(([^\)]+)\)/g)||[]) 
      //make pairs of prop and value         
     .map(function(it){return it.replace(/\)$/,"").split(/\(/)})
     //convert to key-value map/object         
     .reduce(function(m,it){return m[it[0]]=it[1],m},{})

    pour:

    var transformstyle="-webkit-transform: scale(1.1) rotateY(7deg) translateZ(-1px)"

    vous obtenez:

    {scale: "1.1", rotateY: "7deg", translateZ: "-1px"}
    Son surprenant qu'une telle fonctionnalité impressionnante n'est pas plus puissante de l'API javascript. Vraiment, les valeurs individuelles doit être analysée en utilisant les regex? Blech.
    Non ! Standard js getComputedStyle retour d'une matrice/matrix3d. Donc, vous devez analyser et calculer la matrice de données pour obtenir les transformations css dos.
    Bien que cela divise chaque matrice de valeur dans un tableau, les valeurs ne représentent pas les CSS les propriétés de transformation, et par conséquent, ne pas répondre à l'OP de la question.
    Ce fut une assez bonne résoudre pour moi, indépendamment de la question d'origine. J'ai été réglage de la transformation de style avec javascript, il fonctionne par le biais de cette expression m'a donné tout ce split pour que je puisse préserver les valeurs initiales et de ne modifier que les nouvelles valeurs à travers une ultérieure déclaration de style, comme el.style.transformer = scale(${transformstyle.scale}) translateZ(newZ)

    OriginalL'auteur user2044802

  8. 1

    Juste parce que je ne vois pas Javascript d'une Ligne de solutions pour convertir la matrice de code, voici la mienne. Rapide et facile:

    D'abord obtenir toutes les transformer les Valeurs dans une matrice:

    var yourDivsCssValues= window.getComputedStyle(yourDiv, null);
transformValues = testDivCSS.getPropertyValue('transform');

    Pour extraire transformer-y comme un Entier:

    var transformValueY = parseInt((yourVariable1.replace (/,/g, "")).split(" ")[5]);

    Pour extraire transformer-x un nombre Entier:

    var transformValuetX = parseInt((yourVariable2.replace (/,/g, "")).split(" ")[4]);

    Accéder à la valeur de rotation est assez difficile, mais il est un bon guide, si vous voulez le faire:
    https://css-tricks.com/get-value-of-css-rotation-through-javascript/

    OriginalL'auteur davedadizzel

  9. 0

    J'ai pensé à une possibilité. Si vous êtes prêt à analyser les chaînes en JavaScript, l'utilisation

    data=document.getElementById("myDiv").getAttribute("-webkit-transform");

    puis l'interpréter data.

    -webkit-transform n'est pas un attribut, de sorte que vous ne pouvez pas y accéder via l'attribut, vous devez accéder à un style d'objet associé à un élément.

    OriginalL'auteur kalyanji