• 20/7/2016/800x600

    Code du montage publié ICI mais en 800x600px; survolez les images.

    4 images en 800x600px + celle de fond.

     

     

     

     


    <div style="width: 800px; height: 600px; border: 1px solid black; background: url('http://ekladata.com/RCRmQ8v7ZWsVXg4dV7rCV_ZJA80.jpg'); background-size: cover; margin: 10px auto;">
    <p id="f1">&nbsp;</p>
    <p id="f2">&nbsp;</p>
    <p id="f3">&nbsp;</p>
    <p id="f4">&nbsp;</p>
    </div>

    <style><!--
    #f1{position:absolute; z-index:1; width:800px; height:600px; background:url('http://ekladata.com/z0Zd69hNMNS9hrCs0j8DEtOyAzs.jpg'); transform:translate(-600px,0px) perspective(200px) rotatey(-50deg); transform-origin:center right; transition:all 1s linear;}
    #f2{position:absolute; z-index:1; width:800px; height:600px; background:url('http://ekladata.com/_qiliJN4MSUMuiBX40NvT_k9ib8.jpg'); transform:translate(200px,0px) perspective(200px) rotatey(50deg); transform-origin:center left; transition:all 1s linear;}
    #f3{position:absolute; z-index:1; width:800px; height:600px; background:url('http://ekladata.com/bb_oZp5lfoZY4IgUphiN4QRxgQU.jpg'); transform:translate(-200px,0px) perspective(200px) rotatey(-50deg); transform-origin:center right; transition:all 1s linear;}
    #f4{position:absolute; z-index:1; width:800px; height:600px; background:url('http://ekladata.com/nQPyaRNj0ZWHlIqw3aZ3S0U04P0.jpg'); transform:translate(600px,0px) perspective(200px) rotatey(50deg); transform-origin:center left; transition:all 1s linear;}

    #f1:hover, #f2:hover, #f3:hover, #f4:hover{z-index:10; transform:translate(0px,0px) perspective(5000px) rotatey(0deg);}
    --></style>


    Variante avec 6 images.

     

     

     

     

     

     


    <div style="width: 800px; height: 600px; border: 1px solid black; background: url('http://ekladata.com/RCRmQ8v7ZWsVXg4dV7rCV_ZJA80.jpg'); background-size: cover; margin: 10px auto;">
    <p id="a1">&nbsp;</p>
    <p id="a2">&nbsp;</p>
    <p id="a3">&nbsp;</p>
    <p id="a4">&nbsp;</p>
    <p id="a5">&nbsp;</p>
    <p id="a6">&nbsp;</p>
    </div>
    <style><!--
    #a1{position:absolute; z-index:1; width:800px; height:600px; background:url('http://ekladata.com/z0Zd69hNMNS9hrCs0j8DEtOyAzs.jpg'); transform:translate(-700px,0px) perspective(100px) rotatey(-50deg); transform-origin:center right; transition:all 1s linear;}
    #a2{position:absolute; z-index:1; width:800px; height:600px; background:url('http://ekladata.com/_qiliJN4MSUMuiBX40NvT_k9ib8.jpg'); transform:translate(100px,0px) perspective(100px) rotatey(50deg); transform-origin:center left; transition:all 1s linear;}
    #a3{position:absolute; z-index:1; width:800px; height:600px; background:url('http://ekladata.com/bb_oZp5lfoZY4IgUphiN4QRxgQU.jpg'); transform:translate(-400px,0px) perspective(100px) rotatey(-50deg); transform-origin:center right; transition:all 1s linear;}
    #a4{position:absolute; z-index:1; width:800px; height:600px; background:url('http://ekladata.com/nQPyaRNj0ZWHlIqw3aZ3S0U04P0.jpg'); transform:translate(400px,0px) perspective(100px) rotatey(50deg); transform-origin:center left; transition:all 1s linear;}
    #a5{position:absolute; z-index:1; width:800px; height:600px; background:url('http://ekladata.com/bb_oZp5lfoZY4IgUphiN4QRxgQU.jpg'); transform:translate(-100px,0px) perspective(100px) rotatey(-50deg); transform-origin:center right; transition:all 1s linear;}
    #a6{position:absolute; z-index:1; width:800px; height:600px; background:url('http://ekladata.com/nQPyaRNj0ZWHlIqw3aZ3S0U04P0.jpg'); transform:translate(700px,0px) perspective(100px) rotatey(50deg); transform-origin:center left; transition:all 1s linear;}

    #a1:hover, #a2:hover, #a3:hover, #a4:hover, #a5:hover, #a6:hover{z-index:10; transform:translate(0px,0px) perspective(5000px) rotatey(0deg);}
    --></style>