-
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"> </p>
<p id="im2"> </p>
<p id="im3"> </p>
<p id="im4"> </p>
<p id="im5"> </p>
<p id="im6"> </p>
</div>
<p> </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.