-
Clip 11
Une solution moins fluide, pour le moment, mais avec un fond uni.
<div style="height: 600px; width: 800px; position: relative; margin: 10px auto; overflow: hidden; border: 1px solid black;">
<p id="bt1">survol 1</p>
<p id="bt2">survol 2</p>
<p id="cp">
<img class="av1" src="http://ekladata.com/UcZFtZvUItyjuEUgZSItvZaaSq4/5955.jpg" alt="" />
<img class="av1" src="http://ekladata.com/UcZFtZvUItyjuEUgZSItvZaaSq4/5955.jpg" alt="" />
<img class="av1" src="http://ekladata.com/UcZFtZvUItyjuEUgZSItvZaaSq4/5955.jpg" alt="" />
<img class="av1" src="http://ekladata.com/UcZFtZvUItyjuEUgZSItvZaaSq4/5955.jpg" alt="" />
<img class="av2" src="http://ekladata.com/d_k97xmObdnCia79MTJXVTT24JE/5958.jpg" alt="" />
<img class="av2" src="http://ekladata.com/d_k97xmObdnCia79MTJXVTT24JE/5958.jpg" alt="" />
<img class="av2" src="http://ekladata.com/d_k97xmObdnCia79MTJXVTT24JE/5958.jpg" alt="" />
<img class="av2" src="http://ekladata.com/d_k97xmObdnCia79MTJXVTT24JE/5958.jpg" alt="" />
<img class="ar" src="http://ekladata.com/9RnfV9KGVljfHjcNjvFcKt5-FMI/5960.jpg" alt="" />
<img class="ar" src="http://ekladata.com/9RnfV9KGVljfHjcNjvFcKt5-FMI/5960.jpg" alt="" />
<img class="ar" src="http://ekladata.com/9RnfV9KGVljfHjcNjvFcKt5-FMI/5960.jpg" alt="" />
<img class="ar" src="http://ekladata.com/9RnfV9KGVljfHjcNjvFcKt5-FMI/5960.jpg" alt="" />
<img id="fd" src="http://ekladata.com/Oeb3FsORICzbw1gbdJJpsUkTD3U/fd1.jpg" alt="" />
</p>
</div>
<style><!--
#bt1{position:absolute; z-index:20; transform:translate(700px,0px); width:100px; height:30px; border:1px solid black; background-color:lime; text-align:center; font-size:15pt;}
#bt2{position:absolute; z-index:20; transform:translate(700px,50px); width:100px; height:30px; border:1px solid black; background-color:lime; text-align:center; font-size:15pt;}#cp{position:absolute; width:800px; height:600px; transform:translate(0px,0px) perspective(500px); transform-style:preserve-3d;}
#fd{position:absolute; z-index:3;}
#cp img:nth-child(1){position:absolute; z-index:2; clip: rect(0px, 200px, 600px, 0px);transition:all 1s linear ; transform-origin:100px 0px; transform: translate(0px,0px)rotateY(-180deg) ; }
#cp img:nth-child(2){position:absolute; z-index:2; clip: rect(0px, 400px, 600px, 200px);transition:all 1s linear 0.5s; transform-origin:300px 0px; transform: translate(0px,0px) rotateY(-180deg); }
#cp img:nth-child(3){position:absolute; z-index:2;clip: rect(0px, 600px, 600px, 400px);transition:all 1s linear 1s; transform-origin:500px 0px; transform: translate(0px,0px) rotateY(-180deg); }
#cp img:nth-child(4){position:absolute; z-index:2;clip: rect(0px, 800px, 600px, 600px);transition:all 1s linear 1.5s; transform-origin:700px 0px; transform: translate(0px,0px) rotateY(-180deg); }#cp img:nth-child(5){position:absolute; z-index:2; clip: rect(0px, 200px, 600px, 0px);transition:all 1s linear ; transform-origin:100px 0px; transform: translate(0px,0px)rotateY(-180deg) ; }
#cp img:nth-child(6){position:absolute; z-index:2; clip: rect(0px, 400px, 600px, 200px);transition:all 1s linear 0.5s; transform-origin:300px 0px; transform: translate(0px,0px) rotateY(-180deg); }
#cp img:nth-child(7){position:absolute; z-index:2;clip: rect(0px, 600px, 600px, 400px);transition:all 1s linear 1s; transform-origin:500px 0px; transform: translate(0px,0px) rotateY(-180deg); }
#cp img:nth-child(8){position:absolute; z-index:2;clip: rect(0px, 800px, 600px, 600px);transition:all 1s linear 1.5s; transform-origin:700px 0px; transform: translate(0px,0px) rotateY(-180deg); }
#cp img:nth-child(9){position:absolute; z-index:5;clip: rect(0px, 200px, 600px, 0px);transition:all 1s linear ; transform-origin:100px 0px; transform: translate(0px,0px)rotateY(0deg) ; }
#cp img:nth-child(10){position:absolute; z-index:5; clip: rect(0px, 400px, 600px, 200px);transition:all 1s linear 0.5s; transform-origin:300px 0px; transform: translate(0px,0px)rotateY(0deg) ; }
#cp img:nth-child(11){position:absolute; z-index:5; clip: rect(0px, 600px, 600px, 400px);transition:all 1s linear 1s; transform-origin:500px 0px; transform: translate(0px,0px)rotateY(0deg) ; }
#cp img:nth-child(12){position:absolute; z-index:5; clip: rect(0px, 800px, 600px, 600px);transition:all 1s linear 1.5s; transform-origin:700px 0px; transform: translate(0px,0px)rotateY(0deg) ; }#bt1:hover ~#cp img.av1{transform:rotateY(0deg); z-index:5;}
#bt1:hover ~#cp img.ar{transform:rotateY(180deg); z-index:1;}
#bt2:hover ~#cp img.av2{transform:rotateY(0deg); z-index:5;}
#bt2:hover ~#cp img.ar{transform:rotateY(180deg); z-index:1;}
--></style>