Menu

Technocité
Nos formations
Nos services entreprise
Infos pratiques
Validation des Compétences
 
 

Nos projets

COFFEE
DigiBIRD
DIGISTORM
Stages d'été
 
 

Avec le soutien de

 

La semaine dernière nous évoquions les transitions en CSS3, un mécanisme bien utile pour créer des effets graphiques qui nécessitaient autrefois l’apport de librairies tierces en JavaScript. Penchons-nous aujourd’hui sur une autre famille de fonctionnalités qui apporteront sans conteste une expérience visuelle plus riche aux visiteurs de vos pages web, à savoir les transformations.

Il existe deux types de transformations en CSS, celles qui font appel à la 2D et celles utilisant la 3D. Nous nous concentrerons ici sur les premières, qui sont bien mieux implémentées à l’heure actuelle par les différents navigateurs, bien qu’il ne fasse aucun doute que la situation évolue favorablement pour la 3D dans les prochains mois.

Ces propriétés permettent avec un minimum d’efforts de proposer des effets graphiques intéressants de manière native. On peut les utiliser avantageusement sur des photos par exemple.

Voyons comment tout ceci fonctionne concrètement : la propriété scale permet de zoomer sur l’un ou l’autre élément graphique. Alignons horizontalement trois photos et appliquons-leur une transformation d’échelle au survol de la souris :

 

ul.galerie li {

            float: left;

            padding: 10px;

            list-style: none;

}

ul.galerie li a img {

            float: left;

            width: 200px;

}

ul.galerie li a:hover img {

            -webkit-transform: scale(1.5);

            -moz-transform: scale(1.5);

            -o-transform: scale(1.5);

            -ms-transform: scale(1.5);

            transform: scale(1.5);

}

 

On pourra y ajouter un sympathique effet de rotation (dans le sens horaire ou antihoraire) avec rotate.

 

ul.galerie li a:hover img {

            -webkit-transform: scale(1.5) rotate(-15deg);

            -moz-transform: scale(1.5) rotate(-15deg);

            -o-transform: scale(1.5) rotate(-15deg);

            -ms-transform: scale(1.5) rotate(-15deg);

            transform: scale(1.5) rotate(-15deg);

}

Ou encore un effet de translation avec translate.

 

 

ul.galerie li a:hover img {

            -webkit-transform: scale(1.5) translate(15px, 30px);

            -moz-transform: scale(1.5) translate(15px, 30px);

            -o-transform: scale(1.5) translate(15px, 30px);

            -ms-transform: scale(1.5) translate(15px, 30px);

            transform: scale(1.5) translate(15px, 30px);

}

D’autres transformations sont possibles comme skew qui permet de déformer la photo ou box-shadow qui ajoute une ombre portée. À noter que les transformations sont combinables avec les effets de transition afin de créer des animations plus complexes.

Il ne vous reste plus qu’à vous essayer aux différentes possibilités nouvelles offertes par ces propriétés CSS, en gardant à l’esprit toutefois de ne pas transformer vos pages en guirlandes clignotantes, la sobriété restant le maître mot d’une expérience de navigation réussie.