• Perspective

    L'inclinaison en perspective (axe z) est toujours associé à une rotation.

    Nous connaissons l'attribut rotation (rotate(25deg);) mais peut être moins le fait que l'on peut choisir un axe (horizontal (x) ou vertical(y)) pour cette rotation; ce sens de rotation va nous servir avec la perspective.

    Ce sens de rotation n'offre pas d'intérêt sans la perspective: l'image semble s'agrandir mais rien de spectaculaire: vous pouvez essayer.

    Un autre attribut est essentiel pour ce genre d'animation: le point d'origine de l'animation: transform-origin:left center/rigtn center/top center/bottom center;

    La valeur par défaut est le centre de l'image ce qui fait s'agrandir un côté et diminuer l'autre: alors, le côté agrandi occupe tout l'écran ! Vous pouvez essayer de supprimer cet attribut pour le constater.

    Survolez chaque image.


    <img id="x1" src="http://ekladata.com/pEDSvnfCluBtB2IM85oN8nnLdng.jpg" alt="" />
    <style><!--
    #x1{transition:all 1s linear; transform:translate(0px,50px) perspective(400px) rotatey(45deg); transform-origin:left center;}
    #x1:hover{transform:translate(0px,50px) perspective(1000px) rotatey(0deg);}
    --></style>


    <img id="x2" src="http://ekladata.com/pEDSvnfCluBtB2IM85oN8nnLdng.jpg" alt="" />
    <style><!--
    #x2{transition:all 1s linear; transform:translate(0px,50px) perspective(400px) rotatey(-45deg); transform-origin:right center;}
    #x2:hover{transform:translate(0px,50px) perspective(1000px) rotatey(0deg);}
    --></style>


    <img id="x3" src="http://ekladata.com/pEDSvnfCluBtB2IM85oN8nnLdng.jpg" alt="" />
    <style><!--
    #x3{transition:all 1s linear; transform:translate(0px,50px) perspective(400px) rotatex(45deg); transform-origin:bottom center;}
    #x3:hover{transform:translate(0px,50px) perspective(1000px) rotatey(0deg);}
    --></style>


    <img id="x4" src="http://ekladata.com/pEDSvnfCluBtB2IM85oN8nnLdng.jpg" alt="" />
    <style><!--
    #x4{transition:all 1s linear; transform:translate(0px,50px) perspective(400px) rotatex(-45deg); transform-origin:top center;}
    #x4:hover{transform:translate(0px,50px) perspective(1000px) rotatey(0deg);}
    --></style>


    <img id="x5" src="http://ekladata.com/pEDSvnfCluBtB2IM85oN8nnLdng.jpg" alt="" />
    <style><!--
    #x5{transition:all 1s linear; transform:translate(0px,70px) perspective(400px) rotate(-45derg) rotatey(45deg); transform-origin:left center;}
    #x5:hover{transform:translate(0px,70px) perspective(1000px) rotate(0deg) rotatey(0deg);}
    --></style>

    Vous remarquerez la possibilité de donenr une rotation centrée (rotate) et une rotation selon un axe (rotatey) dans un même code.


    <img id="x5" src="http://ekladata.com/pEDSvnfCluBtB2IM85oN8nnLdng.jpg" alt="" />
    <style><!--
    #x6{transition:all 1s linear; transform:translate(0px,10px) perspective(400px) rotate(-45deg) rotatex(45deg); transform-origin:bottom center;}
    #x6:hover{transform:translate(0px,10px) perspective(1000px) rotate(0deg) rotatex(0deg);}
    --></style>