Pliage

Version en 800x600px; survolez le montage.
Une seule adresse d'image pour le montage.

<div id="fd">
<p id="bt">&nbsp;</p>
<p id="el1" class="el">&nbsp;</p>
<p id="el2" class="el">&nbsp;</p>
<p id="el3" class="el">&nbsp;</p>
<p id="el4" class="el">&nbsp;</p>
<p id="el5" class="el">&nbsp;</p>
<p id="el6" class="el">&nbsp;</p>
<p id="el7" class="el">&nbsp;</p>
<p id="el8" class="el">&nbsp;</p>
<p id="el9" class="el">&nbsp;</p>
<p id="el10" class="el">&nbsp;</p>
</div>

<style><!--
#fd{position:relative; width:800px; height:600px; margin:50px auto;}
#bt{position:absolute; z-index:10; width:800px; height:600px; transform:translate(0px,-25px);}
#el1{position:absolute; z-index:1; width:80px; height:600px; border:2px solid white; box-sizing:border-box; transform:translate(0px,0px) skewy(20deg); transition:all 1s linear ; background:url(https://ekladata.com/Xg5FGWkzo45IT9CR1MZUqGCF-vo.jpg); background-position:0% 0%;}
#el2{position:absolute; z-index:1; width:80px; height:600px; border:2px solid white; box-sizing:border-box; transform:translate(80px,0px) skewy(-20deg); transition:all 1s linear ; background:url(https://ekladata.com/Xg5FGWkzo45IT9CR1MZUqGCF-vo.jpg); background-position:11% 0%;}
#el3{position:absolute; z-index:1; width:80px; height:600px; border:2px solid white; box-sizing:border-box; transform:translate(160px,0px) skewy(20deg); transition:all 1s linear ; background:url(https://ekladata.com/Xg5FGWkzo45IT9CR1MZUqGCF-vo.jpg); background-position:22% 0%;}
#el4{position:absolute; z-index:1; width:80px; height:600px; border:2px solid white; box-sizing:border-box; transform:translate(240px,0px) skewy(-20deg); transition:all 1s linear ; background:url(https://ekladata.com/Xg5FGWkzo45IT9CR1MZUqGCF-vo.jpg); background-position:33% 0%;}
#el5{position:absolute; z-index:1; width:80px; height:600px; border:2px solid white; box-sizing:border-box; transform:translate(320px,0px) skewy(20deg); transition:all 1s linear ; background:url(https://ekladata.com/Xg5FGWkzo45IT9CR1MZUqGCF-vo.jpg); background-position:44% 0%;}
#el6{position:absolute; z-index:1; width:80px; height:600px; border:2px solid white; box-sizing:border-box; transform:translate(400px,0px) skewy(-20deg); transition:all 1s linear ; background:url(https://ekladata.com/Xg5FGWkzo45IT9CR1MZUqGCF-vo.jpg); background-position:55% 0%;}
#el7{position:absolute; z-index:1; width:80px; height:600px; border:2px solid white; box-sizing:border-box;transform:translate(480px,0px) skewy(20deg); transition:all 1s linear ; background:url(https://ekladata.com/Xg5FGWkzo45IT9CR1MZUqGCF-vo.jpg); background-position:66% 0%;}
#el8{position:absolute; z-index:1; width:80px; height:600px; border:2px solid white; box-sizing:border-box; transform:translate(560px,0px) skewy(-20deg); transition:all 1s linear ; background:url(https://ekladata.com/Xg5FGWkzo45IT9CR1MZUqGCF-vo.jpg); background-position:77% 0%;}
#el9{position:absolute; z-index:1; width:80px; height:600px; border:2px solid white; box-sizing:border-box; transform:translate(640px,0px) skewy(20deg); transition:all 1s linear ; background:url(https://ekladata.com/Xg5FGWkzo45IT9CR1MZUqGCF-vo.jpg); background-position:88% 0%;}
#el10{position:absolute; z-index:1; width:80px; height:600px; border:2px solid white; box-sizing:border-box; transform:translate(720px,0px) skewy(-20deg); transition:all 1s linear ; background:url(https://ekladata.com/Xg5FGWkzo45IT9CR1MZUqGCF-vo.jpg); background-position:100% 0%;}
#bt:hover ~ #el1{transform:translate(0px,0px) skewy(0deg); border:0px;}
#bt:hover ~ #el2{transform:translate(80px,0px) skewy(0deg); border:0px;}
#bt:hover ~ #el3{transform:translate(160px,0px) skewy(0deg); border:0px;}
#bt:hover ~ #el4{transform:translate(240px,0px) skewy(0deg); border:0px;}
#bt:hover ~ #el5{transform:translate(320px,0px) skewy(0deg); border:0px;}
#bt:hover ~ #el6{transform:translate(400px,0px) skewy(0deg); border:0px;}
#bt:hover ~ #el7{transform:translate(480px,0px) skewy(0deg); border:0px;}
#bt:hover ~ #el8{transform:translate(560px,0px) skewy(0deg); border:0px;}
#bt:hover ~ #el9{transform:translate(640px,0px) skewy(0deg); border:0px;}
#bt:hover ~ #el10{transform:translate(720px,0px) skewy(0deg); border:0px;}
--></style>