JavaScript obtient une transformation matricielle à partir de CSS réguliers et convertit matrix2D en matrix3D

J'ai besoin d'obtenir la transformation matricielle d'une transformation CSS régulière comme celle-ci: rotateX(10deg) rotateZ(10deg) .

Je sais qu'il existe une solution d'hébergement pour WebKit (WebKitCSSMatrix), mais il n'y a rien de tel pour Firefox ou IE …

Donc, j'ai essayé d'obtenir la matrice en configurant la transformation vers un invisible (pas dans le DOM) et en l'obtenant avec GetComputedStyle, mais cette méthode ne renvoie rien si l'élément est caché ou détaché du document.

Existe-t-il un bon tutoriel pour convertir les valeurs en Matrix?

Ensuite, comment convertir une matrice 2D en 3D? De 6 à 16 valeurs …

Vous pouvez calculer la matrice vous-même. Cette page explique comment décrire les rotations en tant que matrice 2D : http://help.adobe.com/fr_US/FlashPlatform/reference/actionscript/3/flash/geom/Matrix.html

Pour une rotation, ce serait:

Entrez la description de l'image ici

On peut accéder aux valeurs de la matrice via ces propriétés. La dernière ligne n'a pas besoin d'être modifiée pour 2d. Pour initialiser une matrice dans l'utilisation de css: matrix(a,b,c,d,e,f)

Propriétés matricielles

Pour les matrices 3D, vous pouvez trouver une bonne introduction ici: http://www.eleqtriq.com/2010/05/understanding-css-3d-transforms/

Que de lire comment configurer manuellement une matrice: http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

Dans les deux cas, vous devrez multiplier plusieurs matrices si vous souhaitez appliquer plus d'une transformation. Des informations sur la façon de le faire peuvent être trouvées ici: http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-contested/

REMARQUE:
getComputedStyle méthode getComputedStyle ne fonctionne que pour les éléments qui sont ajoutés à votre document

Commençons par une fonction qui fait un élément caché et l'ajoute dans votre document:

 var make_test_el = function () { var el = document.createElement("div"); // some browsers doesn't add transform styles if display is inline el.style.display = "block"; // to be sure your element won't be shown el.style.width = "0px"; el.style.height = "0px"; el.style.margin = "0px"; el.style.padding = "0px"; el.style.overflow = "hidden"; document.body.appendChild(el); return el; }

Alors utilisez-le simplement par le code suivant:

 var value = 'rotateX(10deg) rotateZ(10deg)'; // your readable value for transformation var elem = make_test_el(); elem.style.transform = value; // take your result and alert it var result = window.getComputedStyle(elem,null).transform; alert(result); //then remove appended element elem.parentNode.removeChild(elem);

Démo: http://jsfiddle.net/hbh7ypc9/1/

Le résultat que vous verrez peut-être matrix3d(...) ou matrix(...)
Cela dépend du RenderEngine du navigateur et de la valeur donnée
par exemple:
IE10 vous donnera toujours matrix3d(...)
Mais pour les besoins de chrome et d' opéra sur une valeur donnée

Mais je n'ai aucune idée de la conversion d'une matrice 2D en 3D
C'est une question que j'ai aussi
En fait, les valeurs de la matrice sont vraiment difficiles à comprendre
bonne chance…