• transform scale

    Transform scale (échelle équivalent à zoom)

    Agrandissement classique:
    <p ><img id="p1" src="http://ekladata.com/vbVJudbAURLSS7d6lsWctdCFGQw/335x335.jpg" alt="" /></p>
    <style><!--
    #p1{transition:all 1s linear; transform:translate(20px,20px) ;}
    #p1:hover{transform:translate(100px,80px) scale(1.5) ;}
    --></style>


    Agrandissement largeur
    <p ><img id="p2" src="http://ekladata.com/vbVJudbAURLSS7d6lsWctdCFGQw/335x335.jpg" alt="" /></p>
    <style><!--
    #p2{transition:all 1s linear; transform:translate(20px,20px) ;}
    #p2:hover{transform:translate(100px,80px) scaleX(1.5) ;}
    --></style>


    Agrandissement hauteur
    <p ><img id="p3" src="http://ekladata.com/vbVJudbAURLSS7d6lsWctdCFGQw/335x335.jpg" alt="" /></p>
    <style><!--
    #p3{transition:all 1s linear; transform:translate(20px,20px) ;}
    #p3:hover{transform:translate(100px,80px) scaleY(1.5) ;}
    --></style>


    Agrandissement 3d
    <p ><img id="p4" src="http://ekladata.com/vbVJudbAURLSS7d6lsWctdCFGQw/335x335.jpg" alt="" /></p>
    <style><!--
    #p4{transition:all 1s linear; transform:translate(120px,20px) ;}
    #p4:hover{transform:translate(120px,20px) scale3d(1.2,1,1.2) perspective(500px) rotatex(60deg);
    --></style>
    Ce code vous permet de faire un trapèze qui se redresse au survol, en inversant le mouvement.

     


    Agrandissement 3d
    <p ><img id="p5" src="http://ekladata.com/vbVJudbAURLSS7d6lsWctdCFGQw/335x335.jpg" alt="" /></p>
    <style><!--
    #p5{transition:all 1s linear; transform:translate(150px,0px) scale3d(0.3,0.3,0.3) perspective(180px) rotateX(60deg);}
    #p5:hover{transform:translate(150px,0px) scale3d(1,1,1) perspective(1000px) rotateX(0deg);}
    --></style>
    ...

    ....