les transformations CSS3 par l'exemple (partie 1)

Les transformations présentées ci dessous peuvent avoir un point d'origine différent de top right ou 0 0 -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0;

La rotation

-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);

une rotation de 45 degré
sous webkit, on ne peut pas appliquer la transformation à n'importe quel tag HTML ( par exemple le span ne permet pas de transformation de type rotation)

La proportionalité

sur un :hover, nous appiquons la transformation scale -webkit-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); transform: scale(2);

scale par 2 sur un roll over

Si nous modifions l'origine, le scale se fera à partir du top left de notre bloc. -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left;

scale par 2 sur un roll over avec point d'origine différent

Cette transformation couplée à la propriété transition permet d'obtenir une animation

-webkit-transition: all .6s ease-in; -moz-transition: all .6s ease-in; -o-transition: all .6s ease-in; transition: all .6s ease-in;
scale par 2 sur un roll over avec animation
rotate sur un roll over avec animation
retourner en haut de la page