• Transform:rotate

    La rotation d'un élément au survol prend, par défaut, son centre comme origine de l'animation; nous verrons comment modifier ce paramètre.

    Les rotations SURVOL peuvent de faire dans les deux sens et, comme toujours, nous pourrons cumuler plusieurs attributs (déplacement, échelle, perspective...).

    <p><img id="p1" src="http://ekladata.com/23aHwIDWYUGzTNbBvKEMuO0rFlY/sah-rem-014.jpg" alt="" /></p>
    <style><!--
    #p1{transition:all 1s linear; transform:translate(20px,50px) rotate(0deg) ;}
    #p1:hover{transform:translate(20px,50px) rotate(25deg) ;}
    --></style>


    <p><img id="p2" src="http://ekladata.com/23aHwIDWYUGzTNbBvKEMuO0rFlY/sah-rem-014.jpg" alt="" /></p>
    <style><!--
    #p2{transition:all 1s linear; transform:translate(20px,50px) rotate(0deg) ;}
    #p2:hover{transform:translate(20px,50px) rotate(-25deg) ;}
    --></style>


    <p><img id="p3" src="http://ekladata.com/23aHwIDWYUGzTNbBvKEMuO0rFlY/sah-rem-014.jpg" alt="" /></p>
    <style><!--
    #p3{transition:all 1s linear; transform:translate(20px,50px) rotate(0deg) ; border-radius:50%;}
    #p3:hover{transform:translate(20px,50px) rotate(-25deg) ;}
    --></style>
    Pour avoir une image ovale; un rond demande d'avoir une image carrée (d'origine ou modifiée)


    <p><img id="p4" src="http://ekladata.com/23aHwIDWYUGzTNbBvKEMuO0rFlY/sah-rem-014.jpg" alt="" /></p>
    <style><!--
    #p4{transition:all 1s linear;width:300px; height:300px; transform:translate(20px,50px) rotate(0deg); transform-origin:100% 100%; border-radius:50%; }
    #p4:hover{transform:translate(20px,50px) rotate(45deg)}
    --></style>
    Le point d'origine est déplacé à l'angle bas/droit de l'image, au lieu de son centre
    ...


    <p><img id="p5" src="http://ekladata.com/23aHwIDWYUGzTNbBvKEMuO0rFlY/sah-rem-014.jpg" alt="" /></p>
    <style><!--
    #p5{transition:all 1s linear;transform:translate(20px,50px)  perspective(1000px);}
    #p5:hover{transform:translate(50px,50px) rotateX(40deg) rotateX(40deg) rotateY(40deg) perspective(100px);}
    --></style>
    Un essai ( pour moi), de rotation selon les 3 axes mais je n'ai pas pris la formule indiquée, qui ne donnait rien chez moi
    ..
    ..

    ...