[CSS] Faire pivoter une image.

Tutoriel par : MindSpace.
Tutoriel crée par : MindSpace., le 14/03/2012
Niveau : FACILE [X] MOYEN [] DIFFICILE []
Pour quelle version : toutes les versions

Bonjour bonjour
Alors sur ce tuto, je vais vous apprendre à faire "pivoter" une image à l'aide d'un code. Je pourrais simplement vous donner le code et vous laisser vous débrouiller, seulement je n'en verrais pas l'utilité. Pour moi, c'est en comprennant que l'on apprend, et je vais donc faire un maximum pour tout détailler

Voilà ce que ça peut donner : (dites bonjour à Rafiki)



C'est quelque chose de très simple à faire, mais mine de rien, c'est quand même plutôt original si on abuse pas sur le degrés. Ne vous inquietez pas, vous n'aurez pas vraiment besoin d'un master de maths pour comprendre le tuto

Alors tout d'abord nous allons commencer à mettre l'image dans un code, en gros, faire la base. Pour cela, on utilise une balise. Si on mettait notre cher ami [img][/img], ça ne marcherait pas.

Code:

<img src="http://28.media.tumblr.com/tumblr_lrf757pTLH1qd507eo1_500.gif";">

Rien de compliqué pour l'instant. Il suffit de mettre l'url de votre image à la place de celle de notre amie Rafiki.
Attention ; veillez à ne pas supprimer de point virgule ou d’apostrophe. C'est tout bête, mais avec le copier/coller ça se supprime vite, et c'est pourtant vital au code

Maintenant, nous allons passez aux choses sérieuses : faire pivoter votre image !

Le code que nous allons utiliser est celui-là : -moz-transform: rotate(2deg) ;

Pour les nuls en anglais, rotate signifie rotation. Quant à (2deg), il s'agit du nombre de degrés dont votre image va pivoter. J'ai mis 2degrés, mais bien sur, vous pouvez changer à votre guise
Pour l’insérer dans le reste du code on ajoute un "style". Ce qui donne :

Code:

<img src="http://28.media.tumblr.com/tumblr_lrf757pTLH1qd507eo1_500.gif" style="-moz-transform: rotate(2deg) ;">

Normalement, votre code est terminé. Seulement voilà, il ne l'est pas
Si vous naviguez sous Mozilla vous n'aurez aucun problème, par contre, avec Safari et Google Chrome c'est une autre affaire. Et c'est tout à fait normal.
Nous avons mis en code : -moz-transform: rotate(2deg) ;
-moz signifie Mozilla, ce qui veut dire que le code est uniquement visible sous Mozilla.
Alors pour qu'il soit visible sous d'autre navigateur, nous allons rajouter un peu de code (avouons le, c'est toujours mieux si tout le monde le voit.)

Pour que votre effet sur l'image soit visible sous d'autre navigateur il faut rajouter ce code : -webkit-transform: rotate(2deg) ;
-webkit correspond aux autres navigateur, notamment Chrome et Safari.
Votre code final sera donc :

Code:

<img src="http://28.media.tumblr.com/tumblr_lrf757pTLH1qd507eo1_500.gif" style="-moz-transform: rotate(2deg) ; -webkit-transform: rotate(2deg) ;">

Attention ; lorsque vous modifiez le degrés, n'oubliez pas de le faire également pour -webkit

Petite astuce ; Si vous désirez que votre image soit tournée dans l'autre sens ajoutez un moins devant les chiffres des degrès, comme ceci :

Code:

<img src="http://28.media.tumblr.com/tumblr_lrf757pTLH1qd507eo1_500.gif" style="-moz-transform: rotate(-2deg) ; -webkit-transform: rotate(-2deg) ;">

Le résultat :



Et voilà, cette fois si c'est belle et bien terminé ! j'espère qu'il vous sera utile
Pour toute question, n'hésitez pas à me demander