Voici 3 petites applications en CSS 3 pour mettre en valeur vos images ou pourquoi pas des menus de navigations. Au programme, il y aura une animation pour créer un effet rebond en CSS 3, créer une rotation sur une image en CSS3 et jouer avec l'opacité d'une image au survol en CSS 3. Vous pourrez tester chaque animation CSS 3 en ligne et télécharger le pack d'exemples en fin d'article.

Effet Rebond

Dans cet exemple, l'effet de transition est utilisé pour donner une effet de translation verticale. Pour faire cela, les propriètés "-webkit-transition", "-moz-transition" et "-o-transition" sont nécessaires en agissant sur les marges sans utiliser Javascript. Les transitions permettent de passer à un état de départ à un nouvel état.

Tester l'effet rebond

Effet Rotation

Mêmes propriétés utilisées que pour l'effet rebond mais en servant de l'attribut "rotate".

Tester l'effet rotation

Effet Opacité

Mêmes propriétés utilisées que pour l'effet rebond mais en servant des ombres et des reflets avec les attributs "box-shadow" et "box-reflect".

Tester l'effet opacité

Télécharger le pack complet effets Css 3 :