Formation CSS3

Les transformations

Présentation

Parmi les effets les plus spectaculaires apportés par les CSS3, il y a les transformations géométriques d'un contenu.
Le principe est d'appliquer une série d'opérations sur un élément de type bloc.
L'élément est déplacé et transformé, mais sa place reste conservée et les éléments adjacents ne sont pas perturbés.
L'ordre des transformations appliquées a une importance.

La syntaxe est :

transform:operation1(params1) operation2(params2)
            ... operationN(paramsN);

Les opérations de transformation

Les transformations possibles sont :
- rotate() pour la rotation,
- translate() pour la translation,
- scale() pour le changement de dimensions,
- squew() pour la déformation par cisaillement,
- matrix() pour appliquer une transformation matricielle.

Les rotations

Les rotations sont appliquées au centre d'un objet.
La syntaxe est :
```
rotate(angle)
```
avec angle exprimé en degrés (suffixé avec deg).
Exemple pour faire tourner les titres h1 de 45° sens horaire :
```
h1 {
  transform:rotate(45deg);
}
```

Les translations

Les translations sont de trois types :
- Les translations horizontales dont la syntaxe est :
```
translateX(distance)
```
  avec distance exprimée en unités CSS.
- Les translations verticales dont la syntaxe est :
```
translateY(distance)
```
- Les translations mixtes dont la syntaxe est :
```
translate(distance_X,distance_Y)
```
Exemple déplacer les titres h2 de 20 pixels en bas et de 50 pixels à droite :
```
h2 {
  transform:translate(20px,50px);
}
```

Les grossissements/réductions

Les grossissements sont de trois types :
- Les grossissements horizontaux dont la syntaxe est :
```
scaleX(ratio)
```
  avec ratio exprimé en nombre sans unité,
- Les grossissements verticaux dont la syntaxe est :
```
scaleY(ratio)
```
- Les grossissements mixtes dont la syntaxe est :
```
scale(ratio_X,ratio_Y)
```
Exemple grossissement (fois 2) sur les titres h3 et de réduction horizontale (fois 0.8) sur les titres h4 :
```
h3 {
  transform:scale(2);
}
h4 {
  transform:scaleX(0.8);
}
```

Les déformations

Les déformations sont de trois types :
- Les déformations horizontales dont la syntaxe est :
```
skewX(angle)
```
  avec angle exprimé en degrés (suffixé avec deg),
- Les déformations verticales dont la syntaxe est :
```
skewY(angle)
```
- Les déformations mixtes dont la syntaxe est :
```
skew(angle_X,angle_Y)
```
Exemple déformations de 10° sur les titres h5 et de 20° verticalement sur les titres h6 :
```
h5 {
  transform:skew(10deg);
}
h6 {
  transform:skewY(20deg);
}
```

Les transformations matricielles

Toute transformation linéaire peut être représentée par une matrice 3x3 dont 3 termes sont fixes.
Cette matrice est donc caractérisée par 6 termes,
la transformation matrix permet de définir cette transformation en lui passant ces 6 termes :
```
matrix(v1, v2, v3, v4, v5, v6)
```
avec v1, v2, v3, v4, v5, v6 qui correspondent à des valeurs numériques quelconques signées,
Exemple de rotation homothétique de 45° trigonométrique (anti-horaire) avec grossissement de 2 sur les blockquotes :
```
blockquote {
  transform:matrix(1.414, -1.414,
                   1.414,  1.414,
                   0,      0);
}
```

Documentation

les spécifications du W3C : http://www.w3.org/TR/css3-2d-transforms