• 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 !