• Transform translate

    Transform:translate peut provoquer un déplacement dans les 3 directions (H, V, prof)

    On peut n'écrire qu'une valeur dans le cas d'un mouvement dans une direction précise.

    transform:translateX(100px);   déplacement horizontal.

    transform:translateY(100px);   déplacement vertical.

    transform:translateZ(100px);   déplacement en profondeur (que je vais tester !)

    Et aussi écrire deux valeurs: transform:translate(X,Y) ou trois valeurs transform:translate3d(X,Y,Z). Survolez les images.

    Je vais commencer par la fin, par curiosité !
    <p><img id="f1" src="http://ekladata.com/eQ32wibhGdfcdZ4b9nrNY95Ua2Q/2-4-12-014.jpg" alt="" /></p>
    <style><!--
    #f1{transition:all 1s linear; transform:translate3d(70px,20px,0px) perspective(1000px) rotatex(40deg);}
    #f1:hover{transform:translate3d(70px,20px,0px) perspective(1000px);}
    --></style>
    Afin de montrer l'action de translate3d, avec l'animation profondeur (z), voici ce premier montage sans valeur de Z
    Je suis obligé d'ajouter une perspective pour avoir une animation profondeur et la rotation pour bien faire apparaitre l'animation

     

    Je vais commencer par la fin, par curiosité !
    <p><img id="f2" src="http://ekladata.com/eQ32wibhGdfcdZ4b9nrNY95Ua2Q/2-4-12-014.jpg" alt="" /></p>
    <style><!--
    #f1{transition:all 1s linear; transform:translate3d(70px,20px,0px) perspective(1000px) rotatex(40deg);}
    #f1:hover{transform:translate3d(70px,20px,800px) perspective(1000px);}
    --></style>
    Montage avec valeur de z en translate, seule différence entre le départ et le survol (perspective et rotation:idem) 


     

     

    Mais revenons à des choses plus classiques !
    Translation latérale:transform:translateX(70px);
    <p><img id="f3" src="http://ekladata.com/eQ32wibhGdfcdZ4b9nrNY95Ua2Q/2-4-12-014.jpg" alt="" /></p>
    <style><!--
    #f1{transition:all 1s linear; transform:translateX(0px); }
    #f1:hover{transform:translateX(70px); }
    --></style>
    ...

    Le même en vertical
    <p><img id="f4" src="http://ekladata.com/eQ32wibhGdfcdZ4b9nrNY95Ua2Q/2-4-12-014.jpg" alt="" /></p>
    <style><!--
    #f1{transition:all 1s linear; transform:translateY(0px); }
    #f1:hover{transform:translateY(70px); }
    --></style>
    ...

    Le même en cumulant horizontal et vertical.
    <p><img id="f4" src="http://ekladata.com/eQ32wibhGdfcdZ4b9nrNY95Ua2Q/2-4-12-014.jpg" alt="" /></p>
    <style><!--
    #f1{transition:all 1s linear; transform:translate(0px,0px); }
    #f1:hover{transform:translate(70px,50px); }
    --></style>
    ...

    ...