• Clip 9

    Un essai avec changement de sens pour le changement des images.

    survol ici.

    Code:

    <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="bt">survol ici.</p>
    <p id="cp"><img class="av" src="http://ekladata.com/UTNhk8tFWMbC8znDIw0EGqsyUjU/5949.jpg" alt="" /> <img class="av" src="http://ekladata.com/UTNhk8tFWMbC8znDIw0EGqsyUjU/5949.jpg" alt="" /> <img class="av" src="http://ekladata.com/UTNhk8tFWMbC8znDIw0EGqsyUjU/5949.jpg" alt="" /> <img class="av" src="http://ekladata.com/UTNhk8tFWMbC8znDIw0EGqsyUjU/5949.jpg" alt="" /> <img class="ar" src="http://ekladata.com/TiVPwDFMrbzwWrN1mTJibR5Y8Qs/5950.jpg" alt="" /> <img class="ar" src="http://ekladata.com/TiVPwDFMrbzwWrN1mTJibR5Y8Qs/5950.jpg" alt="" /> <img class="ar" src="http://ekladata.com/TiVPwDFMrbzwWrN1mTJibR5Y8Qs/5950.jpg" alt="" /> <img class="ar" src="http://ekladata.com/TiVPwDFMrbzwWrN1mTJibR5Y8Qs/5950.jpg" alt="" /></p>
    </div>
    <style><!--
    #bt{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;}
    #cp{position:absolute; width:800px; height:600px; transform:translate(0px,0px) perspective(500px); }


    #cp img:nth-child(1){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(2){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(3){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(4){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(5){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(6){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(7){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(8){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) ; }


    #bt:hover ~#cp img.av{transform:rotateX(0deg) ; z-index:5;}
    #bt:hover ~#cp img.ar{transform:rotateX(180deg) ; z-index:1;}
    --></style>