-
Clip 9
Un essai avec changement de sens pour le changement des images.
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>