Générateur de transformation 2D CSS3.

Point d'origine
Translation
Echelle
Incliner deg
Rotation
Fonction
-webkit-transform : rotate(36deg) translate(50px,50px) scale(1,2) matrix(1, 0, -0.14, 1, 0, 0) ;
-moz-transform : rotate(36deg) translate(50px,50px) scale(1,2) matrix(1, 0, -0.14, 1, 0, 0) ;
-o-transform : rotate(36deg) translate(50px,50px) scale(1,2) matrix(1, 0, -0.14, 1, 0, 0) ;
-ms-transform :rotate(36deg) translate(50px,50px) scale(1,2) matrix(1, 0, -0.14, 1, 0, 0) ;
transform : rotate(36deg) translate(50px,50px) scale(1,2) matrix(1, 0, -0.14, 1, 0, 0) ;
Le carré d'origine est représenté en noir et le carré transformé est en rouge.
Le point d'origine du carré d'origine est représenté par un petit carré orange.
Attention :
L'ordre d'application des transformations est importante.

Fonction

Permet d'utiliser les fonctions rotate(), translate(), scale() et skew() ou d'utiliser leur équivalence .

Explication du code CSS de transformation 2D.

La propriété CSS est apparue avec , elle permet d'effectuer des , des , des et des sur un élément HTML. La propriété css transform n'est pas reconnue par tous les navigateurs, il est nécessaire de compléter le code CSS pour cette propriété par des propriétés CSS propriétaires pour certains navigateurs :
• , pour Internet Explorer 9.
• pour Safari et Chrome.
• pour Firefox > 3.5 et < 16.
• -o-transform pour Opéra > 10.5 et < 12.10.

Les fonctions CSS de transformation 2D , , et peuvent être replacées par la fonction , seule contrainte est que cette dernière n'accepte pas d'unité de longueur car explicitement ce sont des px ou d'unité d'angle.
• Comment transformer rotate() en matrix().
• Comment transformer skew() en matrix().
• Comment transformer skewX() en matrix().
• Comment transformer skewY() en matrix().
• Comment transformer translate() en matrix().
• Comment transformer translateX() en matrix().
• Comment transformer translateY() en matrix().
• Comment transformer scale() en matrix().
• Comment transformer scaleX() en matrix().
• Comment transformer scaleY() en matrix().

Vous pouvez aussi fusionner deux matrix entre elles.

Vous pouvez changer les unités de longueur qui sont en px par une . Vous pouvez changer les unités d'angle qui sont en deg par une .

Les problèmes possibles.

Il est possible que la transformation ne fonctionne pas :
- si la transformation est appliquée sur un élément inline, sous Firefox, Safari et Chrome.
- si la transformation est appliquée sur une cellule, sous Firefox.
- si le doctype n'est pas valide, sous Internet Explorer.

Compatibilité du code CSS avec les navigateurs.

Je tiens compte aussi des propriétés préfixées (moz, webkit, o, ms).

Le code de transformation 2D css est compatible avec le navigateur Chrome 1+
Chrome 1+
Le code de transformation 2D css est compatible avec le navigateur FireFox 4+
FireFox 4+
Le code de transformation 2D css est compatible avec le navigateur Safari 3.1+
Safari 3.1+
Le code de transformation 2D css est compatible avec le navigateur Internet Explorer 10+
Inter. Expl. 9+
Le code de transformation 2D css est compatible avec le navigateur Opera 10.5+
Opera 10.5+

Tester en Javascript.

Voici un petit script qui ajoute une classe no-csstransformation à la balise HTML quand la propriété de transformation (et/ou version préfixée) n'est pas prise en compte par le navigateur. function haveTransformation(){
 var transformation = false, domPrefixes = ['Webkit','Moz','O','ms','Khtml'], elm = document.createElement("div");
 if(typeof(elm.style["transform"]) !="undefined" ) { transformation = true; }
 for( var i = 0; i < 5; i++ ) {
  if(typeof (elm.style[domPrefixes[i]+ 'Transform']) != "undefined" ) {
   transformation = true;break;
  }
 }
 if(transformation == false){
  document.documentElement.className += " no-csstransformation";
 }
}

Informations complémentaires.

*Transformation CSS3

A ce jour (05/2013) les recommandations des transformations CSS3 du W3C ne sont pas sorties, il ne s'agit pour le moment que d'un projet de travail (Working Draft).
Il est donc possible que certaines propriétés de transformation disparaissent ou apparaissent.

*transform

La propriété de transformation CSS3 transform permet d'assigner des transformations à un élément. Vous devez mettre les propriétés css préfixées : -webkit-transform, -moz-transform, -o-transform et -ms-transform.

*scale()

Les fonctions de transformation CSS3 scale(), scaleX() et scaleY() permettent de modifier l'échelle d'un élément horizontalement ou verticalement.

*-moz-transform

La propriété de transformation CSS3 -moz-transform permet d'assigner des transformations à un élément sous FireFox.

*-webkit-transform

La propriété de transformation CSS3 -webkit-transform permet d'assigner des transformations à un élément sous les navigateurs Webkit.

*-ms-transform

La propriété de transformation CSS3 -ms-transform permet d'assigner des transformations à un élément sous Internet Explorer.

*transform-origin

La propriété de transformation CSS3 transform-origin permet de changer le point d'origine de la transformation.