• Clip 11

    Une solution moins fluide, pour le moment, mais avec un fond uni.

    survol 1

    survol 2

    <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>