-
Inclinaison
On me demande comment incliner une image.
On peut vouloir l'incliner sans animation au survol et ou avec; dans le premier cas, il suffira d'indiquer à l'image le code d'inclinaison, dans le second cas, il faudra ajouter des lignes CSS pour définir la position avant le survol et après, de même que le temps de l'animation.
<p><img style="transform: rotate(10deg);" src="http://ekladata.com/iW2Knm6VaeJhxHQkU4NAPkIsgmE.jpg" alt="" /></p>
La valeur de la rotation peut être négative pour inverser le sens de l'inclinaison.
Si on souhaite que l'image se redresse au survol:
<p><img id="inc1" src="http://ekladata.com/iW2Knm6VaeJhxHQkU4NAPkIsgmE.jpg"></p>
<style><!--
#inc1{transform:rotate(-10deg); transition:all 1s linear;}
#inc1:hover{transform:rotate(0deg);}
--></style>L'attribut "rotate" accepte également un axe de rotation; vertical (x) ou horizontal (y) ca qui est plus apparent avec survol:
<p><img id="inc2" src="http://ekladata.com/i16YqVWdt-4soV61a8KZhSbXc20.jpg"></p>
<style><!--
#inc2{transform:rotatex(-60deg); transition:all 1s linear;}
#inc2:hover{transform:rotatex(0deg);}
--></style>Ce qui nous renvoie à ma page: Perspective.
Rapide présentation mais je suis disponible pour tout renseignement supplémentaire ... dans ce que je sais faire !