Utiliser le CSS 3 pour effectuer des rotations sur son site

Utiliser le CSS 3 pour effectuer des rotations sur son site

Le CSS 3 permet de gérer les transformations de rotations sur un site, les transformations d’échelle, de translation et d’inclinaison ainsi faire pivoter une page, un logo ou un menu entre autres choses. Et on peut faire l’application des effets réalisés en CSS 3 à n’importe quelle balise.

css-3.jpg
Et on peut soi-même faire pivoter un site web par un CCS ainsi que par l’emploi de la propriété –moz-transform. C’est le site en entier qui va subir une rotation et immédiatement, il sera fonctionnel au moins sous Firefox. La propriété transition par exemple permet de faire des animations simples.

Comment reconnaître du CSS 3 ?

Le CSS 3 est compatible avec Forefox 4+, Safari 5, Chrome 1+, Internet Explorer 9+ et Opera 10.5+.Sa particularité est d’assigner des transformations à tel ou tel élément. Seulement, les propriétés de transformation CSS ne sont pas toutes reconnues par les navigateurs.

internet-explorer-9.jpg
On peut parler des  fonctions de transformation CSS 3 translate(), translate X(), translate Y() grâce auxquelles on peut déplacer un élément soit à l’horizontale soit à la verticale. Quant à la fonction de transformation CSS 3 rotate(), elle permet de faire tourner un élément.

Apprendre à le manier rapidement

Il est tout à fait possible de manier assez rapidement le CSS 3. Des tutoriels et des sites en font des démonstrations simples et directes. Pour créer les animations et les rotations en CSS 3, il faut premièrement utiliser les transformations dans le but de gérer les rotations. Ensuite, on ajoute des animations pour faire pivoter un menu par exemple. Celui-ci se met à basculer 2 fois de suite puis s’arrête, c’est-à-dire qu’il descend d’abord et remonte ensuite. Il faut également ajouter tous les préfixes propriétaires, notamment –webkit-transform, -moz-transform, -ms-transform et –o-transform.  et les codes CSS pour que cela fonctionne sur la plupart des navigateurs.

Author: Maissane

Share This Post On