Css3 - Transform et Rotation
Ce tutoriel aborde les propriétés 'transform', 'rotate' et 'transition'.
L'image sera imbriquée dans les "balises de liste" 'ul' et 'li' (quésako)
L'orientation de l'image d'origine se détermine via la propriété 'transform:rotate'.
- Attribuer une valeur de départ de 2 degrés.
- La valeur de transition est ici de 0.3 seconde.
- Au passage de la souris (hover), la valeur d'arrivée sera de 0 degré.
La couleur de texte évolue au passage de la souris (hover) et se détermine via la propriété 'transition'.
- Attribuer une valeur de départ 'color': #ccc
- La valeur de transition : 0.3 seconde.
- Couleur finale via la valeur 'rgba' : color: rgba (170,0,0,1)
Cette fonction n’est pas une propriété CSS, mais plutôt une valeur. Elle s’utilise sur toutes les propriétés qui spécifient une couleur : 'background' - 'color-border' - 'color' ...
Comme pour la fonction rgb, rgba utilise les valeurs rouge, vert et bleu d’une couleur. L’exemple suivant affecte donc la couleur : Rouge:170, Vert:0, Bleu:0 et une valeur de transparence de 10%. color: rgba (170,0,0,1)
Remarque :
Contrairement à 'opacity' qui rend transparent un élément et tous ses enfants, rgba applique cette transparence uniquement à l’élément sélectionné.
