• Clip 10

    Ajout de boutons pour afficher plusieurs images.

    Un inconvénient est que la dernière image cachée apparaît lors de l'animation mais je ne sais pas corriger.

    Ces exemples sont en vertical mais je vais en proposer un en horizontal.

     

    survol 1

    survol 2

    survol 3

    <div style="height: 600px; width: 800px; position: relative; margin: 10px auto; overflow: hidden; border: 1px solid black; background: url('http://ekladata.com/pourquoipas732.eklablog.com/perso/textures/bg68.jpg');">
    <p id="bt1">survol 1</p>
    <p id="bt2">survol 2</p>
    <p id="bt3">survol 3</p>
    <p id="cp"><img class="av1" src="http://ekladata.com/9OQqElP6hBUrEuRWV_HNjBHA5hM/5952.jpg" alt="" /> <img class="av1" src="http://ekladata.com/9OQqElP6hBUrEuRWV_HNjBHA5hM/5952.jpg" alt="" /> <img class="av1" src="http://ekladata.com/9OQqElP6hBUrEuRWV_HNjBHA5hM/5952.jpg" alt="" /> <img class="av1" src="http://ekladata.com/9OQqElP6hBUrEuRWV_HNjBHA5hM/5952.jpg" alt="" /> <img class="av2" src="http://ekladata.com/hxM4C0zuBfAJ08q0ZsM5ChsYRsY/5953.jpg" alt="" /> <img class="av2" src="http://ekladata.com/hxM4C0zuBfAJ08q0ZsM5ChsYRsY/5953.jpg" alt="" /> <img class="av2" src="http://ekladata.com/hxM4C0zuBfAJ08q0ZsM5ChsYRsY/5953.jpg" alt="" /> <img class="av2" src="http://ekladata.com/hxM4C0zuBfAJ08q0ZsM5ChsYRsY/5953.jpg" alt="" /><img class="av3" src="http://ekladata.com/zPuLbqoUe-K9AMu2jdsmI1xHI5A/5954.jpg" alt="" /> <img class="av3" src="http://ekladata.com/zPuLbqoUe-K9AMu2jdsmI1xHI5A/5954.jpg" alt="" /> <img class="av3" src="http://ekladata.com/zPuLbqoUe-K9AMu2jdsmI1xHI5A/5954.jpg" alt="" /> <img class="av3" src="http://ekladata.com/zPuLbqoUe-K9AMu2jdsmI1xHI5A/5954.jpg" alt="" /> <img class="ar" src="http://ekladata.com/6IX3-E6U3H49cmBPhgEwV2MDey4/5951.jpg" alt="" /> <img class="ar" src="http://ekladata.com/6IX3-E6U3H49cmBPhgEwV2MDey4/5951.jpg" alt="" /> <img class="ar" src="http://ekladata.com/6IX3-E6U3H49cmBPhgEwV2MDey4/5951.jpg" alt="" /> <img class="ar" src="http://ekladata.com/6IX3-E6U3H49cmBPhgEwV2MDey4/5951.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;}
    #bt3{position:absolute; z-index:20; transform:translate(700px,100px); 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); }


    #cp img:nth-child(1){position:absolute; z-index:2; clip: rect(0px, 800px, 150px, 0px);transition:all 1s linear 0s ; transform-origin:0px 75px; transform: translate(0px,0px)rotateX(-180deg) ; }
    #cp img:nth-child(2){position:absolute; z-index:2; clip: rect(150px, 800px, 300px, 0px);transition:all 1s linear 0.5s; transform-origin:0px 225px; transform: translate(0px,0px) rotateX(-180deg); }
    #cp img:nth-child(3){position:absolute;z-index:2; clip: rect(300px, 800px, 450px, 0px);transition:all 1s linear 1s; transform-origin:0px 375px; transform: translate(0px,0px) rotateX(-180deg); }
    #cp img:nth-child(4){position:absolute;z-index:2; clip: rect(450px, 800px, 600px, 0px);transition:all 1s linear 1.5s; transform-origin:0px 525px; transform: translate(0px,0px) rotateX(-180deg); }

    #cp img:nth-child(5){position:absolute; z-index:1; clip: rect(0px, 800px, 150px, 0px);transition:all 1s linear 0s ; transform-origin:0px 75px; transform: translate(0px,0px)rotateX(-180deg) ; }
    #cp img:nth-child(6){position:absolute; z-index:1; clip: rect(150px, 800px, 300px, 0px);transition:all 1s linear 0.5s; transform-origin:0px 225px; transform: translate(0px,0px) rotateX(-180deg); }
    #cp img:nth-child(7){position:absolute;z-index:1; clip: rect(300px, 800px, 450px, 0px);transition:all 1s linear 1s; transform-origin:0px 375px; transform: translate(0px,0px) rotateX(-180deg); }
    #cp img:nth-child(8){position:absolute;z-index:1; clip: rect(450px, 800px, 600px, 0px);transition:all 1s linear 1.5s; transform-origin:0px 525px; transform: translate(0px,0px) rotateX(-180deg); }

    #cp img:nth-child(9){position:absolute; z-index:1; clip: rect(0px, 800px, 150px, 0px);transition:all 1s linear 0s ; transform-origin:0px 75px; transform: translate(0px,0px)rotateX(-180deg) ; }
    #cp img:nth-child(10){position:absolute; z-index:1; clip: rect(150px, 800px, 300px, 0px);transition:all 1s linear 0.5s; transform-origin:0px 225px; transform: translate(0px,0px) rotateX(-180deg); }
    #cp img:nth-child(11){position:absolute;z-index:1; clip: rect(300px, 800px, 450px, 0px);transition:all 1s linear 1s; transform-origin:0px 375px; transform: translate(0px,0px) rotateX(-180deg); }
    #cp img:nth-child(12){position:absolute;z-index:1; clip: rect(450px, 800px, 600px, 0px);transition:all 1s linear 1.5s; transform-origin:0px 525px; transform: translate(0px,0px) rotateX(-180deg); }


    #cp img:nth-child(13){position:absolute; z-index:5; clip: rect(0px, 800px, 150px, 0px);transition:all 1s linear 0s; transform-origin:0px 75px; transform: translate(0px,0px)rotateX(0deg) ; }
    #cp img:nth-child(14){position:absolute; z-index:5; clip: rect(150px, 800px, 300px, 0px);transition:all 1s linear 0.5s; transform-origin:0px 225px; transform: translate(0px,0px)rotateX(0deg) ; }
    #cp img:nth-child(15){position:absolute; z-index:5; clip: rect(300px, 800px, 450px, 0px);transition:all 1s linear 1s; transform-origin:0px 375px; transform: translate(0px,0px)rotateX(0deg) ; }
    #cp img:nth-child(16){position:absolute; z-index:5; clip: rect(450px, 800px, 600px, 0px);transition:all 1s linear 1.5s; transform-origin:0px 525px; transform: translate(0px,0px)rotateX(0deg) ; }


    #bt1:hover ~#cp img.av1{transform:rotateX(0deg) ; z-index:5;}
    #bt1:hover ~#cp img.ar{transform:rotateX(180deg) ; z-index:1;}
    #bt2:hover ~#cp img.av2{transform:rotateX(0deg) ; z-index:5;}
    #bt2:hover ~#cp img.ar{transform:rotateX(180deg) ; z-index:1;}
    #bt3:hover ~#cp img.av3{transform:rotateX(0deg) ; z-index:5;}
    #bt3:hover ~#cp img.ar{transform:rotateX(180deg) ; z-index:1;}
    --></style>


    ...