Css3 - Transform et Rotation

Ce tutoriel aborde les propriétés 'transform', 'rotate' et 'transition'.

HTML :

L'image sera imbriquée dans les "balises de liste" 'ul' et 'li' (quésako)

CSS3 - Transform:rotate

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é.

CSS3 - Transition color

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' (voir ci-dessous) : color: rgba (170,0,0,1)

CSS3 - rgba

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é.

  • Télécharger
  • Télécharger
  • Télécharger
PubliÉ le 19 octobre 2011
Source (Icones) : icons.mysitemyway