Comment faire pivoter une image ou un texte?

jeudi 28 août 2014

CSS3 propose de nouveaux outils pour améliorer la présentation des textes ou des images. Il est, par exemple, maintenant possible de faire pivoter un élément en utilisant la propriété CSS 'Transform'. Cette propriété -avec ou sans préfixe- est supportée par plus de 85% des navigateurs en utilisation aujourd'hui. Internet Explorer la supporte depuis la version 10 sans préfixe et depuis la version 9 avec le préfixe -ms-. Il est donc tout à fait possible de l'utiliser à condition d'ajouter les préfixes vendeurs. Comment faire pivoter une image ou un texte lorsque l'on prépare un article avec Blogger.com?

Comment faire pivoter une image ou un texte avec Blogger.com?

Voici quelques exemples de ce qu'il est possible de faire avec la propriété 'transform' de CSS:

Blog and
Make
Money
On Line

ProBloggerTricks

Mais commençons avec un exemple simple. Faire tourner une image. Voici une flèche:

Comment puis-je retourner cette flèche et l'orienter vers le bas? C'est en fait assez simple:
1 - J'insère l'image normalement avec blogger
2 - Je passe à la vue html
3 - Je repère la balise html img ajoutée par blogger lors de l'insertion de l'image dans le texte. Voici ce qu Blogger à généré lorsque j'ai ajouté l'image de la fléche:

4 - J'ajoute l'expression suivante juste avant la fermeture de la balise '/>':

style="transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);"

Magiquement l'image est retournée, et voici ce que l'on obtient:

Naturellement la rotation n'est pas limitée à 180 degrés. Il est possible d'utiliser n'importe quelle valeur positive ou négative. Voici quelques exemples basés sur la même image:

Essayez. Bonne chance et bon blog.

(J'ai publié l'original de cet article en anglais ici.)

Trucs De Blogger

Pages