• Pour Nicole.rotateZ

     

    1

    2

    3

    4

    5

    6

    Survolez les boutons.

     

     

     

     

     

     

     

    Code pour 6 images en 800x600px:

    <div id="bk">
    <p id="bt1">1</p>
    <p id="bt2">2</p>
    <p id="bt3">3</p>
    <p id="bt4">4</p>
    <p id="bt5">5</p>
    <p id="bt6">6</p>
    <p id="comm">Survolez les boutons.</p>
    <p id="im1">&nbsp;</p>
    <p id="im2">&nbsp;</p>
    <p id="im3">&nbsp;</p>
    <p id="im4">&nbsp;</p>
    <p id="im5">&nbsp;</p>
    <p id="im6">&nbsp;</p>
    </div>
    <p>&nbsp;</p>
    <style type="text/css"><!--
    #bt1{position:absolute; transform:translate(750px,20px); z-index:10; width:40px; height:40px; border:2px solid white; box-shadow:3px 3px black; border-radius:50%; background-color:lime; text-align:center; font-size:20pt;}
    #bt2{position:absolute; transform:translate(750px,100px); z-index:10; width:40px; height:40px; border:2px solid white; box-shadow:3px 3px black; border-radius:50%; background-color:lime; text-align:center; font-size:20pt;}
    #bt3{position:absolute; transform:translate(750px,180px); z-index:10; width:40px; height:40px; border:2px solid white; box-shadow:3px 3px black; border-radius:50%; background-color:lime; text-align:center; font-size:20pt;}
    #bt4{position:absolute; transform:translate(750px,260px); z-index:10; width:40px; height:40px; border:2px solid white; box-shadow:3px 3px black; border-radius:50%; background-color:lime; text-align:center; font-size:20pt;}
    #bt5{position:absolute; transform:translate(750px,340px); z-index:10; width:40px; height:40px; border:2px solid white; box-shadow:3px 3px black; border-radius:50%; background-color:lime; text-align:center; font-size:20pt;}
    #bt6{position:absolute; transform:translate(750px,420px); z-index:10; width:40px; height:40px; border:2px solid white; box-shadow:3px 3px black; border-radius:50%; background-color:lime; text-align:center; font-size:20pt;}
    #bk{width:800px; height:600px; border:1px solid black; overflow:hidden; position:relative; transform:translate(100px,10px); background:url('http://ekladata.com/kCHG2Z71_Kj-Hlfiff5qF5WJjXU/bluebkg.jpg'); background-size:contain;}
    #comm{position:absolute; z-index:1; width:400px; text-align:center; transform:translate(200px,200px); font-size:20pt;}
    #im1{position:absolute;z-index:5;width:800px;height:600px;background:url('http://ekladata.com/Qr_YnefJfcRo4GMvPPHUsnPk59w/IMG-3501.jpg'); transition: transform 2s ease-out ;  transform-origin:top left; transform:translate(0px,0px) rotatez(90deg); }
    #im2 { position:absolute; z-index:5; width:800px; height:600px; background:url('http://ekladata.com/tqG-U6AkmRUWhaPx_tYw8sdB_ds/IMG-3503.jpg'); transition: transform 2s ease-out ; transform-origin:bottom left; transform:translate(0px,0px) rotatez(-90deg); }
    #im3{ position:absolute; z-index:5; width:800px; height:600px; background:url('http://ekladata.com/G8QyAL44Yvg9SNeQStGIDOrR58w/IMG-3505.jpg'); transition: transform 2s ease-out ; transform-origin:top right; transform:translate(0px,0px) rotatez(-90deg); }
    #im4 { position:absolute; z-index:5; width:800px; height:600px; background:url('http://ekladata.com/LqVcyaNWx-g2pJ1-y9zro59Inz0/IMG-3510.jpg'); transition: transform 2s ease-out ; transform-origin:bottom right; transform:translate(0px,0px) rotatez(90deg); }
    #im5{ position:absolute; z-index:5; width:800px; height:600px; background:url('http://ekladata.com/rk2SOZGEaYVbXirOVPSIR6wUIC4/IMG-3511.jpg'); transition: transform 2s ease-out ; transform-origin:top left; transform:translate(0px,0px) rotatez(-90deg); }
    #im6 { position:absolute; z-index:5; width:800px; height:600px; background:url('http://ekladata.com/Ic0uV8ysNvSoNAFG3l1yutpc6IM/IMG-3514.jpg'); transition: transform 2s ease-out ; transform-origin:top right; transform:translate(0px,0px) rotatez(90deg); }
    #bt1:hover ~ #im1 {transform:translate(0px,0px) rotatez(0deg); z-index:7; }
    #bt2:hover ~ #im2 {transform:translate(0px,0px) rotatez(0deg); z-index:7; }
    #bt3:hover ~ #im3 {transform:translate(0px,0px) rotatez(0deg); z-index:7; }
    #bt4:hover ~ #im4 {transform:translate(0px,0px) rotatez(0deg); z-index:7; }
    #bt5:hover ~ #im5 {transform:translate(0px,0px) rotatez(0deg); z-index:7; }
    #bt6:hover ~ #im6 {transform:translate(0px,0px) rotatez(0deg); z-index:7; }
    --></style>
    ...
    Le surlignage devrait t'aider à retrouver les attributs en CSS des éléments en HTML; les adresses des images sont en rouge gras et tu n'as qu'à remplacer mes adresses par les tiennes.