Les TRANSFORMATIONS translate/rotate/scale
La propriété transform: n'est plus nécessaire pour
appliquer des transformations sur les éléments. Le résultat sera
toujours le même, qqsoit l'ordre d'exécution des transformations.
1. Translation / 2. Rotation / 3. Mise à l'échelle
Les propriétés peuvent utiliser une ou plusieurs valeurs.
- translate: x || x y || x y z
- rotate : valeur unique (axe z) || x, y, z + valeur
- scale : valeur unique (x et y simultanément) || x y z
translate: 100px
rotate: 45deg
scale: 0.5
translate: 100px 50px
rotate: y 45deg
scale: 1 2
Les ANIMATIONS @keyframe
Elles sont facilitée par le fait que les transformations peuvent
maintenant s'enchaîner et se chevaucher sans que les précédentes
s'annulent.