• Transformation

    Survolez les vignettes pour modifier la forme de la grande image.

     

     

     

     

     

     

     

     

    <div style="height: 600px;">
    <p id="rd">&nbsp;</p>
    <p id="ov1">&nbsp;</p>
    <p id="ov2">&nbsp;</p>
    <p id="ca">&nbsp;</p>
    <p id="tr1">&nbsp;</p>
    <p id="tr2">&nbsp;</p>
    <p id="tr3">&nbsp;</p>
    <p id="fd">&nbsp;</p>
    </div>
    <style><!--
    #rd{position:absolute; transform:translate(1020px,20px); width:60px; height:60px; border:1px solid black; background-color:green; border-radius:50%;}
    #ov1{position:absolute; transform:translate(1020px,100px); width:60px; height:40px; border:1px solid black; background-color:green; border-radius:50%;}
    #ov2{position:absolute; transform:translate(1030px,160px); width:40px; height:60px; border:1px solid black; background-color:green; border-radius:50%;}
    #ca{position:absolute; transform:translate(1020px,240px); width:60px; height:60px; border:1px solid black; background-color:green; border-radius:0%;}
    #tr1{position:absolute; transform:translate(1020px,320px) scale3d(1,1.5,1) perspective(200px) rotateX(60deg); width:60px; height:60px; border:1px solid black; background-color:green;}
    #tr2{position:absolute; transform:translate(1020px,400px) scale3d(1.5,1,1) perspective(200px) rotateY(60deg); width:60px; height:60px; border:1px solid black; background-color:green;}
    #tr3{position:absolute; transform:translate(1020px,500px) scale3d(0.5,1,1) perspective(40px) rotateX(-60deg); width:60px; height:60px; border:1px solid black; background-color:green;}
    #fd{transition:all 2s linear; position:absolute; transform:translate(0px,0px); width:1000px; height:563px; border:2px solid white; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/22/font.JPG');}
    #rd:hover ~ #fd{border-radius:50%; width:563px; background-position:center center; transform:translate(220px,0px);}
    #ov1:hover ~ #fd{border-radius:50%; background-position:center center; transform:translate(0px,0px);}
    #ov2:hover ~ #fd{border-radius:50%; width:300px; background-position:center center; transform:translate(350px,0px);}
    #ca:hover ~ #fd{border-radius:0%; width:563px; background-position:center center; transform:translate(220px,0px);}
    #tr1:hover ~ #fd{border-radius:0%; width:563px; background-position:center center; transform:translate(220px,-50px) scale3d(1,1.8,1) perspective(1000px) rotateX(60deg);}
    #tr2:hover ~ #fd{border-radius:0%; width:563px; background-position:center center; transform:translate(220px,0px) scale3d(1,0.8,1) perspective(1000px) rotateY(60deg);}
    #tr3:hover ~ #fd{border-radius:0%; background-position:center center; transform:translate(0px,100px) scale3d(0.5,1.4,1) perspective(500px) rotateX(-60deg);}
    --></style>
    L'image (id="fd") est placée en dernier dans le code et les boutons au dessus.