Nous allons découvrir la propriété transform en css. Celle-ci permet d'effectuer des rotation, translation, etc... . Attention, pour le moment pour que cette propriété soit interprété par tous les navigateurs il faut pour le moment mettre le préfixe '-moz-' et '-webkit-'.


Transform translate


La fonction `translate` attend deux paramètres. Le premier indiquant la valeur en pixel de la translation sur l'axe horizontal, et le second sur l'axe vertical. Si le second n'est pas renseigné, la valeur 0 sera interprété par défaut.

#exampleA {
 width:30px;
 height30px;
}

#exampleB {
 width:30px;
 height30px;
-moz-transform: translate(50px, 50px);
-webkit-transform: translate(50px, 50px);
}

A
B

Pour obtenir ce résultat nous aurions aussi pu utiliser les deux autres fonctions, qui sont `translateX` et `translateY` qui permettent d'effectuer une translation suivant un seul axe. Ces fonctions attendent un seul paramètre. 


Transform scale


Comme pour la fonction `translate`, la fonction `scale` attend deux paramètres. Le premier renseignant une valeur d'échelle horizontal, et le second sur l'axe vertical. Si le second n'est pas renseigné, la première valeur sera interprété par défaut. 
Les valeurs inférieures à 1 permettront une réduction alors que les valeurs supérieures feront une augmentation. Les valeurs négatives sont acceptées, et simuleront des effets miroirs.

#exampleA {
 width:30px;
 height30px;
}

#exampleB {
 width:30px;
 height30px;
-moz-transform: scale(1.7,1.7);
-webkit-transform: scale(1.7,1.7);
}

#exampleC {
 width:30px;
 height30px;
-moz-transform: scale(0.5,0.5);
-webkit-transform: scale(
0.5,0.5);
}

#exampleD {
 width:30px;
 height30px;
-moz-transform: scale(0.5,1.5);
-webkit-transform: scale(
0.5,1.5);
}

#exampleT {
 width:30px;
 height30px;
-moz-transform: scale(-1,-1);
-webkit-transform: scale(-1
,-1);
}

A
B
C
D
T

Comme pour la translation; il existe les fonctions `scaleX` et `scaleY`.


Transform rotate


La fonction `rotate` quand à elle prend en paramètre une valeur d'un angle en degrés et par défaut la rotation sera effectuée à partir du milieu du bloc. 

#exampleA {
 width:30px;
 height30px;
}

#exampleB {
 width:30px;
 height30px;
-moz-transform: rotate(45deg);
-webkit-transform: 
rotate(45deg);
}

A
B

Pour changer l'axe de rotation, nous allons devoir voir une autre propriété du css, qui est `transform-origin`. Celle-ci attend deux paramètres qui peuvent être une valeur en pourcentage, une valeur en pixel ou les mots clés left, center, right pour l'axe horizontal et top, center, bottom pour l'axe vertical. Les valeurs négatives sont admises.

#exampleC {
 width:30px;
 height30px;
}

#exampleD {
 width:30px;
 height30px;
-moz-transform: rotate(45deg);
-webkit-transform: 
rotate(45deg);
-webkit-transform-origin:top left;
-moz-transform-origin:top left;
}

C
D



Transform skew


La fonction `skew` permet de jouer sur la perspective, et comme les deux premières fonctions que nous avons vues, elle prend en paramètre deux valeurs.  La première indiquant la valeur en degrés de la modification sur l'axe horizontal, et la seconde sur l'axe vertical. Si la seconde n'est pas renseignée, la valeur 0 sera interprété par défaut.
Les fonctions `skewX` et `skewY` existe aussi pour jouer sur un seul axe.

#exampleA {
 width:30px;
 height30px;
}

#exampleB {
 width:30px;
 height30px;
-moz-transform: skew(30deg, 30
deg);
-webkit-transform: skew(30deg, 30deg);
}

#exampleC {
 width:30px;
 height30px;
-moz-transform: skewX(30deg
);
-webkit-transform: skewX(30deg);
}

#exampleD {
 width:30px;
 height30px;
-moz-transform: skewY(30deg
);
-webkit-transform: skewY(30deg);
}

A
B
C
D

Nous avons maintenant vu les principales façons de transformer des bloc en CSS. Vous allez me demander à quoi ça sert. Coupler avec une seconde propriété css que nous verront bientôt, nous arriverons à faire des rendus assez sympas.
Mais avant, regardons comment coupler des transformations, et le résultat que cela peut donner.

Top
Left
Face
#Top{
 width:200px;
 height200px;
-moz-transform: rotate(60deg) skewY(-30deg) scaleY(1.16) translateX(100px);
-webkit-transform: rotate(60deg) skewY(-30deg) scaleY(1.16) translateX(100px);
}

#Left{
 width:200px;
 height200px;
-moz-transform: skewY(30deg) translateY(16px);
-webkit-transform: skewY(30deg) translateY(16px);
}

#Face{
 width:200px;
 height200px;
-moz-transform: skewY(-30deg) translate(200px,-69px);
-webkit-transform: skewY(-30deg) translate(200px,-69px);
}

Transform matrix


Toutes les transformations que l'on vient de voir peuvent être effectuer simultanément avec une seule fonction : `matrix` qui permet de donner une matrice de transformation 2D. Nous n'allons pas voir comment marche les matrice de transformation. mais plutôt comment l'utiliser en CSS.
Cette fonction attend six paramètre [a, b, c, d, e, f]. Les exemple suivant sont des matrices simples. Les quatre premières valeur sont sans unités. Les deux dernières servent à effectuer un décalage(translation) et sont exprimés en pixel. Libre à vous par la suite de laisser libre court à votre imagination.

#A (matrice d'identité, rien ne bouge){
 width:30px;
 height30px;
-moz-transform: matrix(1, 0, 0, 1, 0px, 0px);
-webkit-transform: matrix(1, 0, 0, 1, 0px, 0px);
}

#B (échelle horizontale x2){
 width:30px;
 height30px;
-moz-transform: matrix(2, 0, 0, 1, 0px, 0px);
-webkit-transform: matrix(2, 0, 0, 1, 0px, 0px);
}

#C (réflection horizontale){
 width:30px;
 height30px;
-moz-transform: matrix(-1, 0, 0, 1, 0px, 0px);
-webkit-transform: matrix(-1, 0, 0, 1, 0px, 0px);
}

#D (perspective  horizontale){
 width:30px;
 height30px;
-moz-transform: matrix(1, 0, 1, 1, 0px, 0px);
-webkit-transform: matrix(1, 0, 1, 1, 0px, 0px);
}

#E (rotation et échelle){
 width:30px;
 height30px;
-moz-transform: matrix(0.433, 0.25, -0.25, 0.433, 0px, 0px);
-webkit-transform: matrix(0.433, 0.25, -0.25, 0.433, 0px, 0px);
}
A
B
C
D
E
Le plus grand avantage des matrices c'est le fait de pouvoir les combiner. En effet en multipliant les matrices (plusieurs transformations) on obtient une seule matrice pouvant regrouper plusieurs modifications. Exemple :

Transformation 1 = matrice(a1, b1, c1, d1, e1, f1)
Transformation 2 = matrice(a2, b2, c2, d2, e2, f2)
Transformation 1 + 2 = matrix(a2*a1 + b2*c1, a2*b1 + b2*d1, c2*a1 + d2*c1, c2*b1 + d2*d1, e2*a1 + f2*c1 + e1, e2*b1 + f2*d1 + f1)