-
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"> </p>
<p id="f2"> </p>
<p id="f3"> </p>
<p id="f4"> </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"> </p>
<p id="a2"> </p>
<p id="a3"> </p>
<p id="a4"> </p>
<p id="a5"> </p>
<p id="a6"> </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>