Manipulate a 3D carousel using CSS3, HTML5 and js - html

Question

I need to implement a subroutine that will keep rotating them without human intervention. Would that be at all possible. It is a 3d carousel.
My code is here,.
CSS
.container {
width: 210px;
height: 140px;
position: relative;
margin: 0 auto 40px;
border: 1px solid #CCC;
-webkit-perspective: 1100px;
-moz-perspective: 1100px;
-o-perspective: 1100px;
perspective: 1100px;
}
#carousel {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform: translateZ( -288px );
-moz-transform: translateZ( -288px );
-o-transform: translateZ( -288px );
transform: translateZ( -288px );
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
}
#carousel figure {
display: block;
position: absolute;
width: 186px;
height: 116px;
left: 10px;
top: 10px;
border: 2px solid black;
line-height: 116px;
font-size: 80px;
font-weight: bold;
color: white;
text-align: center;
}
#carousel figure:nth-child(1) { background: hsla( 0, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(2) { background: hsla( 40, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(3) { background: hsla( 80, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(4) { background: hsla( 120, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(5) { background: hsla( 160, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(6) { background: hsla( 200, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(7) { background: hsla( 240, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(8) { background: hsla( 280, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(9) { background: hsla( 320, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(1) {
-webkit-transform: rotateY( 0deg ) translateZ( 288px );
-moz-transform: rotateY( 0deg ) translateZ( 288px );
-o-transform: rotateY( 0deg ) translateZ( 288px );
transform: rotateY( 0deg ) translateZ( 288px );
}
#carousel figure:nth-child(2) {
-webkit-transform: rotateY( 40deg ) translateZ( 288px );
-moz-transform: rotateY( 40deg ) translateZ( 288px );
-o-transform: rotateY( 40deg ) translateZ( 288px );
transform: rotateY( 40deg ) translateZ( 288px );
}
#carousel figure:nth-child(3) {
-webkit-transform: rotateY( 80deg ) translateZ( 288px );
-moz-transform: rotateY( 80deg ) translateZ( 288px );
-o-transform: rotateY( 80deg ) translateZ( 288px );
transform: rotateY( 80deg ) translateZ( 288px );
}
#carousel figure:nth-child(4) {
-webkit-transform: rotateY( 120deg ) translateZ( 288px );
-moz-transform: rotateY( 120deg ) translateZ( 288px );
-o-transform: rotateY( 120deg ) translateZ( 288px );
transform: rotateY( 120deg ) translateZ( 288px );
}
#carousel figure:nth-child(5) {
-webkit-transform: rotateY( 160deg ) translateZ( 288px );
-moz-transform: rotateY( 160deg ) translateZ( 288px );
-o-transform: rotateY( 160deg ) translateZ( 288px );
transform: rotateY( 160deg ) translateZ( 288px );
}
#carousel figure:nth-child(6) {
-webkit-transform: rotateY( 200deg ) translateZ( 288px );
-moz-transform: rotateY( 200deg ) translateZ( 288px );
-o-transform: rotateY( 200deg ) translateZ( 288px );
transform: rotateY( 200deg ) translateZ( 288px );
}
#carousel figure:nth-child(7) {
-webkit-transform: rotateY( 240deg ) translateZ( 288px );
-moz-transform: rotateY( 240deg ) translateZ( 288px );
-o-transform: rotateY( 240deg ) translateZ( 288px );
transform: rotateY( 240deg ) translateZ( 288px );
}
#carousel figure:nth-child(8) {
-webkit-transform: rotateY( 280deg ) translateZ( 288px );
-moz-transform: rotateY( 280deg ) translateZ( 288px );
-o-transform: rotateY( 280deg ) translateZ( 288px );
transform: rotateY( 280deg ) translateZ( 288px );
}
#carousel figure:nth-child(9) {
-webkit-transform: rotateY( 320deg ) translateZ( 288px );
-moz-transform: rotateY( 320deg ) translateZ( 288px );
-o-transform: rotateY( 320deg ) translateZ( 288px );
transform: rotateY( 320deg ) translateZ( 288px );
}
HTML
<h1>Carousel 1</h1>
<section class="container">
<div id="carousel">
<figure>1</figure>
<figure>2</figure>
<figure>3</figure>
<figure>4</figure>
<figure>5</figure>
<figure>6</figure>
<figure>7</figure>
<figure>8</figure>
<figure>9</figure>
</div>
</section>

Answer 1

Yes, it is possible. Using keyframes or steps (but with steps you'll lose transitioning).
http://jsfiddle.net/P5295/
#-webkit-keyframes spin {
0% {-webkit-transform: rotateY(0deg)}
11.1% {-webkit-transform: rotateY(-40deg)}
22.2% {-webkit-transform: rotateY(-80deg)}
33.3% {-webkit-transform: rotateY(-120deg)}
44.4% {-webkit-transform: rotateY(-160deg)}
55.5% {-webkit-transform: rotateY(-200deg)}
66.6% {-webkit-transform: rotateY(-240deg)}
77.7% {-webkit-transform: rotateY(-280deg)}
88.8% {-webkit-transform: rotateY(-320deg)}
100% {-webkit-transform: rotateY(-360deg)}
}
#carousel {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform: translateZ( -288px );
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform .125s;
-webkit-animation: spin 20s infinite;
}
Please note, this code, and my fiddle, only work on chrome because I didn't want to write all the vendor prefixes, you can add -moz-, -o- and the unprefixed version on your own