Caroussel

Caroussel un peu basic... mais bon le codage est simple aussi

 

Vos images doivent être de format 200*200 mais vous pouvez modifier la partie CSS

 

A placer dans votre CSS

#wrapper{
width:600px;
-webkit-perspective: 800;
margin: 150px auto 0 auto;
}

.carrousel8{
width: 200px;
height: 200px;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
-webkit-animation: Caroussel 10s infinite linear;
}

.plan{
position:absolute;
height: 200px;
width: 150px;
text-align:center;
font-size: 8em;
color:#FFF;
background-color: rgba(0, 0, 0, 0.7);
overflow: hidden;
}

@-webkit-keyframes Caroussel{

from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(360deg); }
}

body .p1{ -webkit-transform: translateZ(200px);}
body .p2{ -webkit-transform: rotateY(45deg) translateZ(200px);}
body .p3{ -webkit-transform: rotateY(90deg) translateZ(200px);}
body .p4{ -webkit-transform: rotateY(135deg) translateZ(200px);}
body .p5{ -webkit-transform: rotateY(180deg) translateZ(200px);}
body .p6{ -webkit-transform: rotateY(225deg) translateZ(200px);}
body .p7{ -webkit-transform: rotateY(270deg) translateZ(200px);}
body .p8{ -webkit-transform: rotateY(315deg) translateZ(200px);}

 

A placer sur votre page via l'Editeur HTML

<div id="wrapper" style="margin-top: 100px;">
<div class="carrousel8">
<div class="plan p1"><img src="http://img217.imageshack.us/img217/6287/beguinage008.jpg" alt="" /></div>
<div class="plan p2"><img src="http://img688.imageshack.us/img688/2816/beguinage007.jpg" alt="" /></div>
<div class="plan p3"><img src="http://img256.imageshack.us/img256/5333/beguinage006.jpg" alt="" /></div>
<div class="plan p4"><img src="http://img51.imageshack.us/img51/7062/beguinage005.jpg" alt="" /></div>
<div class="plan p5"><img src="http://img716.imageshack.us/img716/9015/beguinage004.jpg" alt="" /></div>
<div class="plan p6"><img src="http://img822.imageshack.us/img822/4053/beguinage003.jpg" alt="" /></div>
<div class="plan p7"><img src="http://img525.imageshack.us/img525/5930/beguinage002.jpg" alt="" /></div>
<div class="plan p8"><img src="http://img24.imageshack.us/img24/8172/beguinage001.jpg" alt="" /></div>
</div>
</div>

Aucune note. Soyez le premier à attribuer une note !

×