Carousel Effect Slideshow Gallery CSS3

body { background:#000; }
div#carousel { perspective:1200px; background:#100000; padding-top:10%; font-size:0; margin-bottom:3rem; overflow:hidden; }
figure#spinner { transform-stylereserve-3d; height:300px; transform-origin:50% 50% -500px; transition:1s; }
figure#spinner img { width:100%; max-width:425px; position:absolute; left:30%;transform-origin:50% 50% -500px; outline:1px solid transparent; }
figure#spinner img:nth-child(1) { transform:rotateY(0deg); }
figure#spinner img:nth-child(2) { transform:rotateY(-45deg); }
figure#spinner img:nth-child(3) { transform:rotateY(-90deg); }
figure#spinner img:nth-child(4) { transform:rotateY(-135deg); }
figure#spinner img:nth-child(5){ transform:rotateY(-180deg); }
figure#spinner img:nth-child(6){ transform:rotateY(-225deg); }
figure#spinner img:nth-child(7){ transform:rotateY(-270deg); }
figure#spinner img:nth-child({ transform:rotateY(-315deg); }
div#carousel ~ span { color:#fff; margin:5%; display:inline-block; text-decoration:none; font-size:2rem; transition:0.6s color; position:relative;
margin-top:-6rem; border-bottom:none; line-height:0; }
div#carousel ~ span:hover { color:#888; cursorointer; }

<div id="carousel">
<figure id="spinner">
<img src="muthujoo.jpg" alt="">
<img src="t1.png" alt="">
<img src="t2.png" alt="">
<img src="t3.png" alt="">
<img src="t4.png" alt="">
<img src="t5.png" alt="">
<img src="t6.png" alt="">
<img src="t7.png" alt="">
</figure>
</div>
<span style="float:left" class="ss-icon" onclick="galleryspin('-')">◀</span>
<span style="float:right" class="ss-icon" onclick="galleryspin('')">▶</span>

var angle = 0;
function galleryspin(sign) {
spinner = document.querySelector("#spinner");
if (!sign) { angle = angle + 30; } else { angle = angle - 30; }
spinner.setAttribute("style","-webkit-transform:rotateY("+ angle +"deg); -moz-transform:rotateY("+ angle +"deg); transform:rotateY("+ angle +"deg);");
}

Tagged in:

• Carousel effect css3
• Carousel slider css3
• Carousel gallery css3
• Carousel image galler