• Transform skew

    transform:skew(15deg);   pour déformer les images ou cadres. Survolez les exemples.

    <p ><img id="sk1" src="http://ekladata.com/4legvgKLtPMnaHDjVi-oEFcz_KA/400x400.jpg" alt="" /></p>
    <style><!--
    #sk1{transition:transform 1s linear; width:400px; height:400px; transform:skew(15deg) translate(50px, 0px);}
    #sk1:hover{transform:skew(0deg);}
    --></style>
    Nous allons pouvoir choisir le sens de la déformation (skewX  et skewY = horizontal et vertical) et, par défaut, c'est skewX qui est appliqué.


    <p><img id="sk2" src="http://ekladata.com/4legvgKLtPMnaHDjVi-oEFcz_KA/400x400.jpg" alt="" /></p>
    <style><!--
    #sk2{transition:transform 1s linear; width:400px; height:400px; transform:skewY(0deg) translate(50px, 0px);}
    #sk2:hover{transform:skewY(-15deg);}
    --></style>
    ...


    <p><img id="sk3" src="http://ekladata.com/4legvgKLtPMnaHDjVi-oEFcz_KA/400x400.jpg" alt="" /></p>
    <style><!--
    #sk3{transition:transform 1s linear; width:200px; height:200px; transform:skewY(15deg) skewX(45deg) translate(150px, 20px);}
    #sk3:hover{transform:skewY(0deg) skewX(0deg);}
    --></style>
    La déformation horizontale et verticale n'ont pas la même valeur. 


    <p><img id="sk4" src="http://ekladata.com/4legvgKLtPMnaHDjVi-oEFcz_KA/400x400.jpg" alt="" /></p>
    <style><!--
    #sk4{transition:transform 1s linear; position:relative;width:200px; height:200px; transform:skewY(15deg) skewX(45deg) translate(150px, 20px) perspective(200px) rotateX(25deg);}
    #sk4:hover{transform:skewY(0deg) skewX(0deg) translate(150px,0px);}
    --></style>


    <p><img id="sk5" src="http://ekladata.com/4legvgKLtPMnaHDjVi-oEFcz_KA/400x400.jpg" alt="" /></p>
    <style><!--
    #sk5{transition:transform 1s linear; position:relative;width:200px; height:200px; transform:skewY(15deg) skewX(45deg) translate(150px, 20px) perspective(200px) rotateX(25deg); border-radius:50%;}
    #sk5:hover{transform:skewY(0deg) skewX(0deg) translate(150px,50px);}
    --></style>
    En ajoutant un arrondi, etc, etc...


    code pour s'amuser...
    <p><img id="sk5" src="http://ekladata.com/4legvgKLtPMnaHDjVi-oEFcz_KA/400x400.jpg" alt="" /></p>
    <style><!--
    #sk6{transition:transform 1s linear; width:200px; height:200px; transform:skew(20deg,20deg) translate(150px, 20px);}
    #sk6:hover{transform:skew(-20deg,-20deg) translate(220px,150px);}
    --></style>
    ...
    ...

    ...