CSS3 Slideshow Animation tutorial
by Arshad Ahmed
Hi everyone myself Arshad Ahmed I am a Web & Graphics Designer, this is my first tutorial on CSS3 slide show animation I have used CSS3 transition effects for slide the images, in this tutorial you will learn about how CSS3 transition works for sliding the images without JavaScript like the demo as shown below:
Basic HTML Structure
<div id="wrapper">
<div id="slider">
<img id="sl1" src="images/car1.jpg" alt="" />
<img id="sl2" src="images/car2.jpg" alt="" />
<img id="sl3" src="images/car3.jpg" alt="" />
<img id="sl4" src="images/car4.jpg" alt="" />
</div>
</div>
The CSS
#wrapper {
width: 960px;
margin: 0 auto;
}
#slider {
width: 930px;
height: 500px;
overflow: hidden;
background: #fff url(images/back.jpg) no-repeat;
box-shadow: 0 0 20px #aeaeae;
position: relative;
top: 20px;
}
#sl1 {
position: absolute;
left: 530px;
transition: left 1s, z-index 1s, transform 1s;
-moz-transition: left 1s, z-index 1s, -o-transform 1s;
-webkit-transition: left 1s, z-index 1s, -webkit-transform 1s;
-o-transition: left 1s, z-index 1s, -moz-transform 1s;
transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
}
#sl2 {
position: absolute;
left: 630px;
transition: left 1s, z-index 1s, transform 1s;
-moz-transition: left 1s, z-index 1s, -o-transform 1s;
-webkit-transition: left 1s, z-index 1s, -webkit-transform 1s;
-o-transition: left 1s, z-index 1s, -moz-transform 1s;
transform: rotate(-7deg);
-o-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
}
#sl3 {
position: absolute;
left: 730px;
transition: left 1s, z-index 1s, transform 1s;
-moz-transition: left 1s, z-index 1s, -o-transform 1s;
-webkit-transition: left 1s, z-index 1s, -webkit-transform 1s;
-o-transition: left 1s, z-index 1s, -moz-transform 1s;
transform: rotate(-4deg);
-o-transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
}
#sl4 {
position: absolute;
left: 830px;
transition: left 1s, z-index 1s, transform 1s;
-moz-transition: left 1s, z-index 1s, -o-transform 1s;
-webkit-transition: left 1s, z-index 1s, -webkit-transform 1s;
-o-transition: left 1s, z-index 1s, -moz-transform 1s;
transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}
#sl1:hover {
left: 0;
z-index: 5;
transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
#sl2:hover {
left: 0;
z-index: 5;
transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
#sl3:hover {
left: 0;
z-index: 5;
transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
#sl4:hover {
left: 0;
z-index: 5;
transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}