• Transform

    Je reprends ici des informations que vous trouverez, plus complètes, sur le net, mais appliquées à des images, utilisation plus usuelles sur les blogs.

    Tout d'abord, reprenons l'écriture d'un code de base:

    <img id="ex1" src="http://ekladata.com/7tUY4uE6y-4TYiCJyTpqCGFVhGU/sahune-16-4-13-001.jpg">

    <style><!--

    #ex1{ici, vous alignez les attributs que vous appliquez à votre image; ici, ce sera transform:translate...; rotate();...;}

    --></style>

    ****************

    Les  principaux attributs possibles en transform, présentés au survol par clarté; la vitesse de l'animation sera ici de 1 seconde.
    Je reviendrai plus complètement sur chacun de ces attributs dans d'autres pages.

    TRANSLATE (déplacement)
    <p><img id="ex1" src="http://ekladata.com/7tUY4uE6y-4TYiCJyTpqCGFVhGU/sahune-16-4-13-001.jpg" alt="" /></p>
    <style><!--
    #ex1{transition:all 1s linear; transform:translate(0px,0px);}
    #ex1:hover{transform:translate(30px,20px);}
    --></style>

    A la suite de transform, vous écrivez le ou les attributs de votre choix: le déplacement par translate.
    transform:translate(Hpx,Vpx);
    Si vous n'écrivez qu'un chiffre, ce sera horizontal; vous trouverez une autre façon sur le net, ne compliquons pas à ce stade.

    ROTATE(rotation)
    <p><img id="ex2" src="http://ekladata.com/7tUY4uE6y-4TYiCJyTpqCGFVhGU/sahune-16-4-13-001.jpg" alt="" /></p>
    <style><!--
    #ex1{transition:all 1s linear; transform:rotate(0deg);}
    #ex1:hover{transform:rotate(25deg);}
    --></style>
    ...
    La rotation entraîne une sortie du cadre mais ce n'est pas le sujet.
    Indiquer la valeur de transform dans le premier paragraphe n'est pas indispensable mais plus clair dans cet article, pour montrer le mouvement de l'image.

    SCALE( échelle)
    <p><img id="ex3" src="http://ekladata.com/7tUY4uE6y-4TYiCJyTpqCGFVhGU/sahune-16-4-13-001.jpg" alt="" /></p>
    <style><!--
    #ex1{transition:all 1s linear; transform:scale(1);}
    #ex1:hover{transform:scale(1.5);}
    --></style>
    ...
    ...

    SKEW( déformation)
    <p><img id="ex4" src="http://ekladata.com/7tUY4uE6y-4TYiCJyTpqCGFVhGU/sahune-16-4-13-001.jpg" alt="" /></p>
    <style><!--
    #ex1{transition:all 1s linear; transform:skew(0deg);}
    #ex1:hover{transform:skew(20deg;}
    --></style>
    ...
    La valeur de l'angle peut être positive ou négative.
    ...

    Voilà le principe sur ces 4 attributs et si le sujet vous intéresse, je vais préparer une page sur chacun car ils offrent différentes possibilités.

    De plus nous pouvons cumuler les attributs en écrivant, par exemple: transform:translate(50px,20px) rotate(-10deg) scale(0.5) skew(-10deg);

    Selon l'attribut, le point de référence (origine de l'animation) est soit centré, soit sur l'angle haut/gauche; nous allons pouvoir le modifier pour obtenir des animations intéressantes.